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致 Steve Jobs , 感谢他努力推广 HTML 5, lhHTML 5 如此热门，这 
本书应该能大卖吧 • 

再致 Steve Jobs , 他是我们心目中的英雄。 
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《Head First HTML5 Prograwmiwg 》 的作者 





BrU 


按照 Head Fim 系列合作者 Kathy Sierra 的说法 s Eric 是 
w 少有的奇才之，不仅语言流畅，实践经验丰官，在很多 
领域都表现非凡，他是 hipster 高手，副总裁、工程师，而 
a 是名符其实的智多星。 " 



Elisabeth 是 1 位软件工程师，作家和培训师 D 从她作 
为耶鲁大学学生之 H 起就一直热衷于技术，她在耶鲁大 
学获得了计算机科学硕士学位，井设计了一个并发的可 
视化编程语言和软件体系结构。 


在专业领域， Eric 最近刚刚离开任职近十年的一家媒体公 
司*他在迪斯尼公司担任 Disney Online & Disney.com 的 
CTO. Eric 现在把时间全部投人到 Wickedly Smart t 这是他 
与 EUsabeih 共同创建的一家启动公司 a 


Elisabeth 从早期就一直从事 intemet 的工作。她合怍创 
建了颇有声誉的网站： The Ada Project, 这是蕺早帮助 
计算机科学领域的女性在线找工怍和寻求指导信息的网 
站之一„ 


经过培训， Eric 已经成为一位计算机科学家，在耶魯大学 
攻读博士学位期间曾与#_界杰出人物 David GelenUer 同窗^ 
他的论文被认为对寻找桌面隐喻 的释代 品有若深远影 
响，这也是活动流的首个实现（活动流是他与 Gelernter 博 
士提出的一个概念） * 

在闲暇时间， E 士对音乐深深着迷。在 iPho 加 appstore 上可 
以找到 Erie 最近与音乐“先锋” Steve Roach 合作的一个项 
自，名为 Immersion Station , 

Eric 与妻子，以及小女儿居住在华盛顿州双桥岛 D 他女儿 
是 Eric 工作室的常客，她特別喜欢打开他的合成器和音效 
开关。 Eric 对儿童教育和营养也很关注,总在想方设法做 
出改善。 

可以给 Eric 写邮件 ( eric @ wickedlysmart . com ) ,或者 
访问他的网站 （ http :// eric :£ reeman . eom ) 。 


她目前是 WkkdlySmart 的合作创姶人，这是一个关注 
Web 技术的在线教育项目，在这里她完成了有关的图 
长文章，视频等^在此之前，作为 O’ReLUy Media 的 
特殊项目主任 （Director of Special Projects ) ， Elisabeth 
曾经在各种技术专题发布过个人研讨文档和在线课程, 
这使她对创建学习体验来帮助人们理解技术越来越充满 
热情 D 在 O’Reilly 工作之前， Elisabeth 主要在迪斯尼公 
司播洒她的仙女魔法粉，在那里，她带领数宇媒体研发 
力最开展研究工作。 

如果没有坐在计算机前 * 你会发现 Elisabeth 总是带着她 
的相机在户外踏青.骑单车或者划皮艇，也吋能在烹谰 
素食大餐， 

口1以给她发 Email (beth 芭 wickedlysmart . com ) 或 
者访问她的博客 （ http :// elisabethrobson . c ： om ) a 


译注： 桌面隐喻是在用户界面中用人们熟悉的桌面上的物 
品来清楚地表现计算机可处理的能力， 
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如何使用这本 G 


淮造含齑达本书？ 

如果对下面的所有问题都能肯定地回答 41 是”： 

@你有一台安装了 Web 浏览器和测试编辑器的计算机吗？ 

© 你是不是想学习、理解、记住并且用最好的技术和最 
新的标准来创建 Web 应用？ 

( 3 ) 你是不是更喜欢一种轻松的氛围 ， 就像在晚餐餐桌上交 
谈一样，而不愿意被动地听枯燥乏味的技术报告？ 


谁玎能不适含痞这本书? 


刁以参考 ^Htad First H-TML. 
百来 加入我 fT] 的 HTM 缘 

© 你是不是在开发 Web 应用，正在找一本关于 KTML 5 的参 
考书？ 


如果满足下面任何一种 情况: 

@你是不是对于写 Web 页面一无所知? 


(3) 你是不是对新鲜事物都畏首畏尾？只軎欢简单的样 
式，而不敢尝试把条纹和格子混在一起看看？你是不 
是觉得，如果加人了 ciheesy 50 的教育片和拟人化的 
JavaScript API ,这样一本书肯定不是一本正经八百的 
技木书？ 


那么，这本书将不适合你。 



本严 
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我们知遙你在想什么。 

"这算一本正经八百的 HTML 5 编程书吗？" 


14 这些图做什么用？" 
w 我真能这样学吗？” 

我们也知迤你的大胎正在想什么。 





你的大脑总是渴求一挂新奇的东西。它一直在搜寻1审视.期待着不寻常 
的亊情发生。太脑的构造就是如此，正是这一点才让我们不至干墨守成 A 
规，能够与时俱进 g M 

我们每天都会遇到许多按部就班的事情，这些事情很普通，对干这 
样一些例行的事情或者平常的东西，你的大陷又是怎么处理的呢？ ■■ 
它的做法很简单，就是不 it 这些平常的东西妨碍大脑真正的1作 4 
那么什么是大脑真正的工作呢？这就是记住那呰确实重要的事情 
它不会费心地去记乏味的东西，就好像大脑里冇一个筛子，这个筛子 VR 
会筛掉显然不 重要” 的东西，如果遇到的事情枯燥乏味*这些东丙 H 
就无法通过这个筛子。 M 

那么你的大脑怎么知道到底哪些东西重要呢？打个比方，假如你某 " 
一天外出 旅行、 突然一只大老虎跳到你面前，此时此刻，你的大脑和身体会 
做何反应？ 

神经元会 “点火 ”，情绪煤发，释放出一些化学物质。 

好了，这样你的大脑就会知道 * 

这肯定很重要!可不能忘记了！ 

不过，假如你正侍在家里或者坐在图书馆里，这里很安全.很舒适，肯定 
没有老虎。你正在刻苦学习，准备应付考试。也可能想学一些比 A 一 
较难的技术，你的老板认为掌握这种技术需要一周时间，蛾多不 r ™ 
超过十天。 CZ 

这就存在一个问题。你的大脑很想给你帮忙。它会努力地把这些 
显然不太重要的内容赶走，保证这些东西不去後占本不算充足的脑 C 
力资源。这些资源最好还是用来记住那些确实重要的事情，比如大 f 
老虎，再比如遭遇火灾等。就像你的大脑会让你记住绝对不能再 I 
穿着短裤去滑雪^ # 

没有一种简单的办法来告诉 大陷； k 嘿，大脑，真是谢谢你了， * 
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不过不管这本书多没意思，也不管现在我对它多么无动于衷，但 


我确实希望你能把这些东西记下来。 
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"Head First 9 的读考目的七 * 

那么，怎么学习：;2必 ss 和 ssssss: ssss 
s?=ss; 本=字。我们很瓣么让你的大脑兴奋起来" 

Tffift " eHeadFirSt ^ mR L . ㈣ 辦齡 


leadFirs 柳财權. 

率 St 獅 _让人看 

_ : rr : 二二二 ^ 

=二二 从龍更好地解 决有_孤 
丞爾-种针对个人的交谈式风格。 最新 的研究表明. 

用—种千 e 巴的语^绍_ 要用雜 的语言•另外 

-个跡紗红棘 酬轉思的朋 

t 在这两个人中.你会史注费 ㈣ 


让料的 A 

起来.产生新 的知识 。为 

ms : ST 二来: — 种 
思维。 ...m 


思维。 

引起谈者的 注童. 邮要让他一直保持注意！ 们;？ i 页后实在是让我昏昏欲睡' 你的 大脑找 

t 的 体骑，奇怪 .枪眼 &意料之外 的东私 学^ 项有难 触新枝 

4 _读者的棘现在我们知2工西记 二 ，这些东西 

> 有怎样 mi 補柳_心鮮 • 缝所说 

就会留在__中•柿、 —' 純麟-种自如果你解 

以 z ::_ 东西，或者发-1=:_识 

伙所不_的，此时就会有—种自㈣油然而生 & 

..一 . 
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无认知：布兵思考的思考 


如果你真的想学，而且想学得更快、更深，就应该注意你怎样才会专注起来，考 
虑自己是怎样思考的，并了解你的学习方法。 


我们屮间大多数人 K 这么大可能都没有上过有关元认知或学习理论的课程。我们 
想学习，但是很少有人教我们怎么来学习 # 


我想知成怎么才躲 
雄过我的大姑 ， it 
它论位达些东®… 



不过，这里可以做一个假设，如果你手上有这本书，你想学习项 g 管理，而 R 可 
能不想花太多时间。如果你想把这本书中读到的知识真正用起来，就需要 记住你 
读到的所有内容^为此，必须理解这些内容。要想最大程度地利用这本书或其他 
任何一本书 T 或者掌捤学习经验 T 就要让你的大脑负起茧來，要求它记住这些内 
容。 


怎么做到呢？技巧就在干要 It 你的大脑认为你学习的新东西确实很重 
要，对你的生活有很大影响。就像老虎出现在面前一样。如若不然，你 
将陷人旷日持久的拉锯战中，虽然你很想记住所学的新内容，但是你的 
大脑却会竭尽全力地把它们拒之门外。 


那么究竞怎样才能让大脑把 HTML 5 (和 JavaScript ) 开发看做墨一 
只饥饿的老虎呢？ 


这有两条路，一条比较慢，很乏味。另一条路不仅更快，还更有效。慢方法就是大量 
地讓复 D 你肯定知道，如果反反复复地看到同一个东西> 即便再没有意思，你也能学 
会并记住。如果做了足够的重复，你的大脑就会说， H 尽管看上去这对他来 i 兑好像不 
電要，不过，既然他这样一而再、洱而三地看间一个东西，所以我假定这应该是茧要 
的， 

更快的方法是尽一切可能让大脑活动起来 T 特别是开动大脑来完成不同类型的活动, 
如何做到这一点呢？上一页列出的学习原则正是一些主要的吋取做法，而1经证实* 
它们确实有助于让你的大脑全力以赴。例如，研究表明，把文字放在所描述图片的中 
间（而不是放在这-页的别处，比如作为标题，或者放在正文中），这样会比你的大 
脑更多地考虑这些文字与图片之间有什么关系，而这就会 U ： 更多的神经元点火。让更 
多的神经元点火=你的太晌更冇可能认为这些内容值得关注，而且很可能需要 i 己下来。 

交谈式风格也很冇帮助，当人们意识到自己在与“ 别人” 交谈时 * 往往会更专心，这 
是因为他们总想踉上谈话的思路，并能做出适当的发言。让人惊奇的是，大脶并不关 
心 " 交谈”的对像究兗是谁，即使你只是与一本书“交谈”，它也不会在乎！另一方 
面，如果写作风格很正统.千巴巴的，你的大脑就会觉得*这就像坐在一群人当中被 
动地听人做报告一样，很没意思，所以不必在意对方说的是什么，甚至可以打瞌睡。 


不过，图片和交谈风格还只是开始而已*能做的还有很多。 


你现在的位 M > 
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可妒抨 rw 的方法 
让你 的大膦躲范 


好了*我们该做的已经做 r , 剩下的就要看你自己的了 6 以下提示可 
以作为一个 起点： 听一听你的大脑是怎么说的，弄清楚对你来说哪些 


® 慢一点 D 你理解得越多，需要记的就越少。 

不要光是看看就行了。停下来，好好想一想^书中 
提出问题的时候，你不要莨接去翻答案。可以假 
想真的有人在问你这个问题。你 tt 大脑想得越深 
人，就越有可能学会并记住它 D 

@ 做练习， 自己记笔记。 

我们留了练匀，伹是如果这些练习的解答也由我 
们一手包办，那和有人替你参加考试有什么分别？ 
不要只是坐在那里看着练习发呆。拿出笔来，写一 
写画一画^大里研究都证实，学习过程中如果能 
实际动动手，这将改善你的学习。 

( D 阋读"没有傻问题”。 

顾名思义。这些问题不是可有可无的旁注，它 
们绝对甚核心内容的一部分！千万不要跳过去 

(4) 上床睡觉之前不要再看别的书，至少不要看其他 
^有难度的东西。 

学 M 中有一部分是在你合上书之后完成的（特别 
是，要把学到的知识长久地记住，这往往无法在 
看书的过程中做到）。你的大脑也需要有自己的 
时间，这样才能再做 一些处 理。如果在这段处 m 
时间内你又往大脑里灌输丫新的知识，那么你刚 
才学的一些东西就会丢掉。 

@要喝水，而且要多喝点水。 

能提供充足的液体，你的大脑才能有蛄佳表现 & 

如果缺水（可能在你感觉到口渴之前就已经缺 
水 n ，学习能力就会下降。 


<6)讲出来，而且要大声讲出来， 

说话可以剌激大脑的另一部分。如果你想看憧 
什么，或者想更丰地记住它，就要大声地说出 
来，更好的办法是，大声地解释给别人听。这 
样你会学得更快，而且可能会有以前光看不说 
时不普有的新发现。 

© 听听你的大脑怎 么说。 

注意一下你的大脑是不是负荷太重了。如果发 
现自己开始浮光掠影地翻看 T 或者刚看的东西 
就忘记了，这说明 你该休 息一会了 4 达到某个 
临界点时，如果还是~■味地向大脑里塞，这对 
干加快学习速度根本没有帮助，甚至还可能影 
响正 常的学习进程 & 

© 要有点感觉 

你的大險需要知道这是很重要的东西。要真正 
融人到书中的故事里 a 为书里的照片加上你自 
己的阁题 。 你可能觉得一个笑话很憋脚，不太 
让人满意，但这总比根本无动于衷要好 D 

( D 真正做些工作！ 

把这 些知识 应用到你的日常工作中去*利用你 
所学的想法完成项目决策 a 具体做些工作，你 
会得到书中练习和活动以外的经验 D 所需要的 
只是一支笔和一个要解决的问题……通过使用 
针对考试所学的工具和技术可以更好地解决这 
个问题. 


你现柱的位摄 ► 
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如何使用这本 


重要说硪 

要把这看做是一个学习过程，而不要简单地把它看成是一本参考书6我们在安排内容的时候有意做了 
一些刪减，只要是对有关内容的学习有妨碍，都毫不留怙地把这些部分一律删掉。另外，第一次看这 
本书的时候，要从第一页从头看起，因为书中后面的部分会假定你已经看过而且学会了前面的内容。 

希望你了解 HTML 和 CSS 。 

如果你不懼 HTMLte 记（也就是说，关子 HTML 文档的所有内容，包括元素 . 属性、属性结构、结构与 
表现）》读这本书之前请先找一本 ((Head First HTML with CSS & XHTMU 看看,如果你对 HTML 已 
经有所了解，应该能顺利地读下去^ 

如果对 JavaScript 有一些经验会有帮助，不过不要求你了解 JavaScript 。 

如果你有编程或编写脚本（甚至不是 hvaScdpt ) 的技术背铁1肯定会有帮助 e 不过，读这本书并不要 
求你懂 JavaScript, 实际上，这本书设计作为 ((Head First HTML with CSS & XHTML)) 的续篇，而那本 
书中并没有脚本 D 

建议你学习这本书时最好使用多种浏览器。 

建汶你用不同的浏览器测试这本书中的页面和 Web 应用。这会让你了解不同浏览器之间的差别，另外也 
能对创建适用于多种浏览器的页面有所认识。我们强烈推荐学习这本书时使用 Google Chrome 和 Apple 
Safari, 因为一般来讲，它们诂符合当前的标准。不过我们真的建议你还要尝试其他主流浏览器的当前 
版本，包括 Internet Explorer, Fire fox 和 Opera , 以及安装有 iOS 和 Android 系统的设备上的移动浏览器， 


书里的实践活动绝不是可有可无。 

这里的练习和实践活动不是可有可无的装饰和摆设，它们也是这本书核心内容的-部分 D 其中有些练 
习和活动有助干记忆，有些能够帮助你理解，还有一些对于如何应用所学的知识很有帮助。千万不要 
把这些练习跳过不做。甚至填卞游戏也很重要，它们可以帮助你将有关概念植人你的大脑 q 不过更重 
要的是，它们可以让你的大脑有机会在不同的上下文考虑这些词汇和槪念。 

我们有意安排了许多重复，这些重复非常重要。 

Head First 系列图书有一个与众不同的地方，这就是，我们希望你确确实实地掌握这些知识，另外希望 
在学完这本书之后你能记住学过了什么大多数参考书都不太重视 重复和 冋顾，但是由于这是一本有 
关学习的书，你会看到一些概念一而再.再而三地出现。 

"Brain Power (头脑风 暴）" 练习没有答案 。 

有一些头脑風暴练习根本没有正确的答案，另外一些练习中，头脑风暴实践活动的一部分学习过程就 
是让你确定你的答案是否正确以及在何种情况下正确。有些头脑风暴练习中.你会得到一些提示*为 
你指明正确的方向。 
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软件索求 

要编写 HTML 5 和〗 avaScript 代码，你需要有一个文本编辑器、一个浏览器 * 有时还 
需要一个 Web 服务器（可以本地安装在你的个人台式机上）。 

对于 Windows ， 我们推荐的文本编辑器是 PSPad、TextPad 或 EdhPlus (不 过， 
如果别无选择，也可以使用 Notepad) 。 对干 Mac 我们推荐的文本编辑器包括 
Text Wrangler, 如果你使用的是一个 Linux 系统，其中已经内 

罝了大貴文本编辑器，相信不需要我们多说了。 


希望你已经了解浏览器，而且至少安装了两个浏览器（见上一页的说明）。如果 
还没有，现在就动手安装吧 D 另外学习如何使用浏览器开发工具也很有意义，每 
个主流浏览器都有一些内置工具，可以用来检查 JavaScript 控制台（使用 consoJe . 
log 显示时，除了输出之外还能看到错误输出，这个工具很方便，吋以作为 alert 
的候选）， Web 存储使用. DOM 、 应用到 元素的 CSS 样式，诸如此类 。 有些浏览 
器甚至还有插件来提供另外的开发工具。学习这本书井不需要这些开发工具，不 
过如果你想花些时间来研究如何使用这些工具，这会让你的开发更为 容易。 

有些 HTML 5 特性和 JavaScript API 要求从一个实际 Web 服务器提供文件而不是通 
过加载文件（也就是说，你的 URL 要以 http :// 开头，而不是 file ://) 。 我 fj 会 
在这本书中适当的地方明确指出哪些例子需要有一个服务器，不过，如果你愿 
意，建议现在就在你的计算机上安装一个服 务器。 对干 Mac 和 Lirmx , 已经内置了 
Apache , 所以只需要知道如何访问这个服务器以及把文件放在哪里，从而能够使 
用你的本地服务器提供这些文件。对于 Windows , 则需要安装 Apache 或 IIS $如果 
你选择安装 Apache , 现在已经有丰亩的开源工具 （如 WAMP 和 XAMPP ) ，安装相 
当容易。 


该说的 都已经 说了！祝你开心 
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致我们的技术审校人员： 

非常感谢我们的技术审校团队。这个团队再次向我们 证明 了我们是多少需要他们的技术 
经验和对细节问题的关注。 David Powers , Rebeca Dunn - Krahn , Trevor Farlow , Paul 
Barry , Louise Barr^nBert Bates 在审校时都不遗余力，全凭大家的努力，这本书比原先好太 
多了,你们太棒了 1 
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引子 


致谢 


致更多技术审校: 


我们的书中总会有他，不过这里还是想对 David Powers 再说两句 。0 
David Powers 是我们最尊敬的技术审校，他也是很多书的作者，包括 
SPHP Solutions : Dynamic Web Development Made Easy 》 。 David 的雄议 
总能 lh 我们的文字大有起色，如果经过了 David 的审査，我们就会很放 
心，晚上能睡得更好，也能达到我们的技术目标 s David ， 再次感谢！ 


玫鹐核：栽们后®3本丰社冗 
秸该定他科？被不翁作衿我 


致 O Reilly 人员: 

Courtney Nash 肩负着最艰难的任务管理工作，不仅仅是这本 《Head 
First HTML 5 PmgrammingS ,嗯*她述要管理我们^ Courtney 不仅为 
我们淸空了道路上的所有障碍，同时就像每一位编辑需要做的一样，还 
要向我们施加必要的压力终于让这本书得以问世^不过，最重要的 
是， Courtney 还对这本书及内容提供了非常有价值的反馈，使这本书有 
了 JL 次重要的返 I 。正是由干 Courtney 的努力，让这本书更为出色 。谢 
谢你 a 



Lou Barr 也是这本书不可或缺的一 部分， 
对于这本书，她身兼很多角色》不仅是技 
术审校人员、平面设计人员、 Web 设计人 
员，间时也是 Photoshop 处理人员。谢谢 
你， Lou , 没有你我们绝无可能完成！ 





还要感谢帮助过我们的其他人员： 

迅耍感谢 CVRdlly 的其他人员，感谢大家各种各样不同方式的支持。这 

个团队包括 Mike Hendrickson, Mike Loukides, Laurel Ruma、Karen 
Shaner、Sanders Kleinfeld, Kristen Borg, Karen Montgomery, Rachel 
Monaghan' Jutie Hawks 和 Nancy Reinhardt 。 


你现在的位置 ► 
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致谢 


他交殳义 . 卸来 y 


更多致谢 f 

还要感谢另外的很多人： 

James Hensthdge 编写的代码后来成为第10章中的分形浏览器，我们根据 
书中的用途做了调整，以便在这本书中使用。我们的代码可能没有他原先 
那 个版+ 精巧，对此我们深表歉意 g LaurenceZankowski 是一位演员 ，同 
財也是-位艺术家，在这本书中再次以 Starbuzz CEO 的形象出现 T 还帮我 
们测试了第8章中的视频应用（务必要看）。 Bain bridge Island Downtown 
Assodation 慷慨地允许我们使用他们绝妙的 kjgo ( 由 Denise Harris 设讣） 
怍为 Wickedly Smart 总部的 logo 。 感谢 Anthony Vizzari 和 A&A Studios 允许 
我们使用他们非儿的摄像间照片。 

我们的 TweetShirt 启动项目示例使用了 ChethStudioSiNet 的一些好看的图 
标。非常感谢 Internet Archive 的辛勒工作，我们在 Webvilk TV 中用到的 
电影就来源于此。还要感谢 Daniel Steinberg 总能为我们提出建议。 




通后要感谢 Kathy 和 Bert a 

最后，识绝不诰不®要，要感谢 Kathy 
Sierra 和 Bert Bates »我们最煮要的合 
作者，也是创造这个系列的核心人物。 
再一次，希望我们没有为这个系列丢 
脸。 


sierra 





* 之所以要感谢这么多人，这是 H 为我们涮试过，书中致舟提到的每一个人都起码会买上一本，如果亲戚朗友 
多， 可能还会买更多本。 如果你希望在我们下木书的故澌中出现 t 而 J _ 你有一个大家族，请联系我们， 
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Safari ®© 书在线 

Q I Safari 图书在线是一个按需提供资源的数字图书馆，从中可 

以很容易地捜索 moo 本技求书、参考书 和视 频 ， \kmnm 
你想要的答案> 

只需 汀阅， 就可以从我们的在线图书馆阅读仟何页面，观肴任何视频。你可以 
在你的手机和移动设备 t 看书，能够在新书出版之前获得书0，还可以享有特 
权査看正在编写的书稿并向作者提出反馈意见。你可以剪切粘贴代码示例、整 
理最喜欢的图书、下载你需要的章节、为重要内容设罝朽签.创建笔记、打印 
页面，此外还有大量特性可以节省时间，让你从中受益。 

O'Reilly Mdiad 经将这本书（英文版）上传到 Safari 图书在线服务 D 要想通过 
数字方式全面访问这本书以及 a ReiHy 和其他出版商提供的其他类似图书，可 
以免费注册 ^ faribooksoniine.com 0 


你现在的位置 ► 
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213 
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473 
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详细§录 

引子 

你的大脑与 HTML 编程。你想学些新东西，但是你的大脑总是帮倒忙，它 
会努力让你记不住所学的东西。你的大脑 在想： “最好留出空间来记住 
那些确实重要的事情 T 比如要避开哪个野生动物，还有裸体滑®是不是 
不太好 那么，如何让你的大脑就范？让它认为如果不知道 HTML 5 和 
JavaScript 你将无法生存！ 
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认轵 HTML5 

欢迎来到 Web 镇 

HTML 正发展得如火如荼。 确实，起初 HTML 只是一个标记语言，不 
过最近 HTML 早已有了新的功用。如今我们得到的这个语言已经特别为 
构建真正的 Web 应用做了调整，提供了本地存储、 2 D 绘图、离线支持. 
套接宇和线程等诸多特性。 HTML 的发展当然不会是一帆風顺，其中充 
满了戏剧性的变故（这些我们都将一一介绍），不过，这一章中，我们 
首先会去 Web 镇兜兜风，感受一下 " HTML 5" 都有些什么 a 来吧，上 
车，向 Web 镇前进，让我们从零开始认识 HTML 5。 


今天就升级到 HTML 5! 2 

KTML ^ o - Matic 介绍，着手更新你的 HTML ! 4 

没想到吧， HTML 5 标记居然离你这么近！ 1 

HTML 5 闪亮登场；虽新版 HTML 的告白 11 

真正的 HTML 5 请起立 ■ 12 

HTML 5 到底如何工作 . 14 

谁做什么？ 16 


第一项任务：浏览器侦察 


17 



用 J a vaS cript 能做些什么？ 
编写正式的 JavaScript 
编写 IE 式的 ： TavaScript (续) 
要点 

练习答案 


22 

25 

26 
31 
33 


X 
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介绍 JavaScript 和 POM 

一点点代码 

Java Script 会带你进入新境界 & 你已经了解了 HTML 标记（也称为结 
构）， 而且知道了 CSS 样式（也叫做表示），剰下的就是 JavaScript (这也 
称为行 为）。 如果你只知道结构和表示，当然了，创建一个漂亮的贝面是 
没有问题的，不过它们只^是页面而已 D 用 JavaScript 增加行为时，你就能 
创建一种交互式的体验^或者，还可以更棒，你能创建完备的 Web 应用 
准备好了吗？下面就在你的 Web 工具箱里增加一项最有意思、功能最全的 
技能： ■JavaScript 和编程！ 


JavaScript 的工作方式 36 

用 JavaScript 能做什么？ 37 

声明变董 38 



如何命名变量 
需要表达 

反反复复 . 

用 JavaScript 做判断 

E 多判断……另外，增加一个 61 收容箱 " 

在页面中增加 JavaScript, 怎么加？在哪里加？ 
JavaScript 如何与页面交互 
如何制作你自己的 DOM 
初尝 DOM 

HTML5 來自火星， JavaScript 来自金星 
贾面完全加载之前不要打扰 DOM 
那么， DOM 还能做什么？ 

能不能再谈谈 JavaScript? 

或者，能不能吿诉我 JavaScript 中如何存储多个值? 
Phrase-o-Matic 


40 

43 

46 

49 

50 

5 3 

54 

55 

56 
58 
64 
66 

67 

71 


要点 75 

练习答案 77 


XI 




目录 



事件，处理程序，渚如此类 

—点点交互 

你还没有与用户接触呢。 你已经了解 javaScript 的基础知识，不过 
你能与你的用户交互吗？如果页面能响应用户的输人，它们就不再只 
是文档了，而是有生命的、有反应的应用。在这一章中，你将学习 
如何处理一种用户输入形式（嘿嘿，这是个双关语），并把老式的 
HTML < f 0 mi > 元素关联到具体的代码。听上去有些危险，不过这样确 
实功能强大。系上安全带 * 这一章速度会很快，我们将从零出发，转 


瞬间就会到达交互式应用。 



准备进人 Web 镇之声 86 

出发…… 87 

不过我点电 "Add Song" 按钮时什么也没有发生 &8 

处 现事件 ^ 

制订计划…… ^ 

访问 44 Add Song" 按钮 90 

为按钮指定 一 个点击处理程序 

仔细研究发生了什 么…" 92 

获得歌曲名 94 

如何向页面增加一首歌？ 97 

如何创建一个新元桌 " 

向 DOM 增加新元素 100 

集成在一起…… 101 

. 试一试. 101 

回颐一我们做的工作 102 

如何增加成品代码…… 105 

集成成品代码 

要点 1⑽ 

练习答案 llQ 
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扩展你 的询汇 
如何增加你自己的函数 
函数如何工作 
函数剖析 

局部变量和全局变置 

了解局部变量和全局变量的作用域 

噢，我们提到过函数也是值吗？ 

有人谈到“对象”？ 

如何用 JavaScript 创建对象 
可以用对象做的一些事情 
谈谈向函数传人对象 
对象也可以有行为…… 

再回到 Web 镇彤院…… 

增加 "this " 关键字 
如何创建构造函数 
到底是怎么回事？ 

成一试你的构造函数 
window 对象到底是什么？ 

再谈 window.onload 
再谈 document 对象 
再谈 doc ument ,getEl ement Byld 
再来考虑一个对象：元紊对象 
要点 

练习答案 


JavaScript^ 数和对象 

正式 JavaScript 

你能把自己称为脚本开发人员吗？ 可能吧，你已经馑得不少 

JavaScript 了， 不过，既然能作为一个程序员，谁还只想当个区区脚 
本开发人员呢？现在严肃一点，是时候了，你该学习学习函数和对 gu 
要想编写更强大1更有组织，而且更易于维护的代码，它们正是关键 
所在, 另外， HTML5 JavaScript API 中也大量使用了函数和对象，所 
以你对它们越了解，就能越快地熟悉新 API 并熟练掌控^系上安全带, 
这一章要求你必须全力以赴…… 
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实现 HTML 忮簠感知 

地理定位 

无处可 逃 & 有时，如果能知道你在什么位罝，结臬会大不相同（特别是对于一个 
Web 应 用）。 这一章我们会告诉你如何创建位置感知的 Web 页面，有时你能精准地 
指出用户正站在哪个角落，有时只能确定他们位于哪个城区（不过总能知道在哪 
个城 市）。 当然了，有时你根本无法确定他们的位菁. t 这可能是技术上的原因， 
也可能只是因为他们不希望你多管闲事。可以想想看。不管怎样，这一章我们开 
始研究一个 JavaScript API : 地理定位。带着你最好的位置感知设备（甚至可以是 
你的桌面 PC ) ，出发吧。 



位置，位置，位置 

166 

纬度和经度+― 

167 

地理定位 API 如何确定你的位罝 

168 

你到底在哪里？ 

172 

如何集成 

176 

找出我们的秘密位置…… 

179 

编写代码査找距离 

181 

如何向页面增加地图 

183 

加一个按钉 . 

186 

用 Google Maps API 还能做另外一些很酷的事情 

188 

可以谈谈你的楕度吗？ 

L 91 

“无处可逃” 

192 

启动应用 

193 

调整原来的代码…… 

194 

动起来！ 

196 

你有一些选项 . 

198 

起时和最大 年龄， 一 

199 

大胆尝试（让地理定位充分施 

202 

完成这个应用！ 

204 

集成我们的新函数 

205 

要点 

207 

练习答案 

210 
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鸟 Wieb 交流 
喜欢社交的应用 

你留在页面里太久了 该出去走走，与 Web 服务聊聊，收集些数据带回来， 
这样就能构建更好的应用*把所有这些数据融合起来。这是编写现代 HTML5 
应用很重要的一部分，不过，要做到这样，你必须知道如何与 Web 服务交流 6 
这一章我们就来 L 寸论这个内容，在你的斑面中结合一个实际服务的数据 D 
了解如何做到之后，你就能走出去，与你想要的任何 Web 服务交往了 a 我们甚 
至会告诉你同 Web 服务交流时要用的最流行的“行话” D 所以，踉我来，你会 
用到更多的 API: 通信 APU 
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不爯是 X 輩的老电视 
视频”以及特邀演员“画布” 

不再需要插件 ^毕竞，视频现在是 HTML 家族的直系成员 8 把<4如 0 >元素直接放在 
訂面中，你就能立即看到视颊，而且大多数设备上都能支持。不过，视颊绝不仅仅是一 
个元素，它还是一个 JavaScript API, 有了它，我们可以控制视频的播放、创建自己的 
定制视频界面，还可以用全新的方式集成视颊与 HTML 的其余部分。说到集成.，…还 
记得我们一直在淡论的视频与画布的联系吧。你会看到，视频和画布在一起会为我们 
提供一种强有力的新方法来实时地处理视频。这一章我们先在页面中玩转视频，然后 
再来研究 JavaScript API, 来吧，只用一点点标记、 JavaScript , 视频与画布，结果会让 
你瞠 R 结舌 P 
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运用 JavaScript 

Web 工作线程 

脚本运行缓慢，你还想继续运行吗？ 如果你使用 JavaScript 或浏览 Web 的时间足 
够长，吋能见过 Mow script" 消息告诉你脚本运行缓慢。不过，既然你的新机器 
里已经拥有那些多核处理器，脚本怎么可能会运行得慢呢？这是因为， JavaScript- 
次只能做一件事^不过，有了 HTML5 和 Web 工作线程1 —切都改变了。现在完全可 
以创建你自己的 JavaScdpt 工作线程来完成更多工作。也许你只是想设计一个更有响 
应性的应用，或者可能只想最大限度地发挥机器的 CPU 能力，不论怎样， Web 工作 
线程都竭诚为你提供帮助。带 t 你的 lavaScript 经理帽，找些工人干活吧！ 
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附彔：其他 


我们已经介绍了很多，这本书也快要结束 

了。 我们会想你的，不过在你离开之前，还要再 
做一点准备，否则我们实在不放心让你贸然进入 
这个纷乱的世界。我们不可能把你需要知道的一 
切都放在这样短短的一章里 & 实际上，我们原先 
确实加人了（其他章节中没有谈到的）需要了解 
的有关 HTMJL 5 的所有内容，只不过把字体缩小 
到0+00004。这样才能放得下.可惜没有人能看 
得清。所以，我们最后还是删去了大部分内容， 
只把最重要的部分保留在这个“十大主题”附录 
中。 
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1 认轵 HTML 5 




龟 i 







欢 S 来到_镇、 



承參 





莪们莫去 Web 锇啪！游儿有好多趄#的 
HTM 15 遠筠，我们还 会去斟 的掩儿疰邊， 
真 it 人期待。來屯，蹲我们一道，我们会 
沿瘅尚伪介绍箝有新果*, 




V : . I —-1 3 < - • • * ' i_ •. 




HTML 正发展得如火如荼。确实，起初 HTML 只是一个标 

记语言，不过最近 HTML 早已有了新的功用 D 如今我们得到 .， A 

:!#: XHTMUfi 

的这个语言已经特别为构建真正的 Web 应用做了调整，提供 
了本地存储、 2 D 绘图 I 离线支持1套接字和线程等诸多 

的佯，存后 © 我 

性。 HTML 的发展当然不会是一帆风顺，其中充满了戏剧性 们抖奋 
的变故（这些我们都将一一介 绍〉， 不过，这一章中，我们 介绍 

XffT 7^ L Q 

酋先会去 Web 镇兜兜风，惑受一下 " HTMLS " 都有些什么 。 

来吧，上车，向 Web 镇前进，让我们从零开始认识 HTML 5。 


这是新的一章 1 





辨稃麵 _释_麵_^ 爾⑽誦 _讎_ ■就能絶瘙的 蹩脚的 _ ::麵 

11 :： :' 镁:議_義: I 議_ 

奠的送么畚— ' 

謹 __ 變 ;|_______ 議 _ 議 ________ 觀 _|^^^^ 

i 下面这个年代久远的陈旧/过时的 ti&r 




碱 - 卜■‘傳鉍義 

: ：：；•： ■ ： ■ ;：!； : 说:.减 . ::: S::K. i:; 

々秦落 .： ■ ::: •. :.t 幻 :: ::: : ：：：：SM ：：： : 钱皆碑赘巧神:费 

齡 : i 函 :::;_ 靈:獄 

: 賴 ; 

<imgr 自 r 士如 S . 也不允 k 必」凌轾去:葬不策霹 

■ • ■ 1 • f • ‘ ■ ' 1 1 - , 1 ' ■ „ ^ - ，- . . ■■ ■ • ■ " ■ ■ I ,L ■ . . ■ ■ ■ • „ . . . ■ ■ ■ ^ ' . I ' ■ " ^ ' " ■ " 1 .* -' 

:■」■:::■■■'■:■■ :->:_■'■■••■■■■ ■■■__:-■. ■::■■■ : .x.-.x :■'':■'-• ■■■■■'〜 ■■■■■■■ • ■:'■: -ISFWW:/ 1 : : 夺 ：：■: ■■ :: =•■ :■:•■■■：■:■;■■ -：• ■:: 

<p> ：：： ： ：：：■：■：■. ■ - ■_'-■■ ■■ ■ ': 十 、':: : .：->>：.：■>：■：■： ::'■•，：: >■ .'；»：：：■：；；■'•'； ； ■'■.-> ： ■■- ： :■: ■■ ： ■'.■ ： . 乂： ■:■ 一 : ■ 一 ■' 

-■ 曹 1 r ! ' ■ ■ * « ■ . . ^ .1 ........... . . ' " ■ ■ - ■ - ■ I ■ ■ ■ , 

::: coniwrsation. And. a gmto or two of Tap Tap Kevolultion. 


■ ■_ HB ■ ■ r JL ■ - 


，/ if 级看看写 HTML 讳多容易卜 

先来看*这个 HTML : 这是用 HTML 4川（鲂一个版本/而不是 HTML 5 写的。仔细查看每一行 ，回 
忆一下每一部分做什么用。你可以在书上做些标注。下面几页我们会告诉你如何把这个代码转换成 
HTML 5 , - , 































认识 ： L: 


Sharpen your pencil 




仔细查看第 2 页上的 HTML 代码之后，你能看出来哪些标记可以用 HTML5 修改？ 
或者你希望做哪些修改？这里可以帮你指出一点，即 doctype 定义： 






ii — 都分搾出我们用 
HTML 4(51, 另蚪 Ci 个杉 
记用(茬亡）鹐写 





<fDOCTYPE html PUBLIC " 『 //W3C//DTD HTML 4,01//EN ,T 
"http; // ww w , w3 . or g/ TK/html 4 /e t r ic t . dtd’_> 


(if 稚出 r 定义 这个 
杉 逋 的盘4。 

要记住， doc type 定义要放在 HTML 文件的最前面，可以告诉浏览器你的文档是什么 
类型，在这里，文档类型为 HTML4XH。 通过使用 doctypt 浏览器就能更准确地选 
择用什么方式来解释和表现你的页面，所以强烈推荐使用 doctype。 

那么，运用你的推理能力，你认为 HTML5 的 doctype 定义会是什么样？请写在下面 
(稍后介绍这个内容时可以再返回来检查你的答 案）： 




夕 




你现在的位置 ► 3 
















更新你的 





% 





HTWIL 5 —( M - Motlc 介绍，著手更新你的 htmu 皆昏 




第 1" 歩会 ;_p( 尔大讫一惊：跟我来、下面先从 Head First:Lounge H^FML 最前面人手、 
我们要更新 doctypt 让它有 HTML5 的新“面貌％ 

以下是原来的 HTML 版本的 docty pe : 


m 



<1 DOCTY PE htmi PUBLIC ,T ^//W3C//DTD HTHE 4.01//EN - 
,T http; //www. w3. or g/TR/h tm!4/3 tr ict. dtd p, > 


现在.你可"能会猜测，我 111 是不是打算把 doctype 中的每一处_ 都替 •换 

成 6 V s t 对不对 Z 暇 ， 猜借了。下面就是让人惊奇的地九了 『 HTMLS 的新 
doctype 银简:单： 


<rdoctype html> 



震的印呰赞恨 


跑农3 。 


不用再'搜索 Google 来记住 doctype 是什么样，也不用从另一个文件复制粘贴 
doc type, 这个 doctype 非常简单，你肯定能轻松记住。 

不过， 请等等，还有呢…… 


这不仅仅是 HTML5 的 doctype T 这也是 HTML 将来所有版本的 doctype ^ 换句话 
说， doctype 不会再变了。不仅如此，它甚至在老版本的浏览器中也能正常工作。 







如果你是 'Extreme Makeovers” 或 ^The Biggest Loser" 电视剧的粉丝，肯定会 
喜欢第2步。这一步中我们要处理 meta 标记的内容，来看调整前后的 变化： 

<meta http-equ iv= ( 'content^ type 11 c onte nt= H te xt/html; charset=UTF-8 "> 

<meta charset= M utf-8 ,T > 
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确实，新的 m 时 a 标记减香不^也简单得多 & 用 HTML5 指定 meta 标记时，只需随 
标记提 供一个 字符编码。不管你是否相信，所有浏览器（包括原来的和新的浏览 
器）都认识这个 meta 描述，所以任何页面上都可以使用，它都能正常工作。 




























令、 


认识— — 



现在来看第3步,完成这一步后就万事俱备了。这里我们还是要关注 < head>t 
素，打算升级 link 标记。现在的 link 标记如下，这是一个类型为 text / css 的链接， 

指向-个样 式表： 脅兹鼸 



<link typers 11 text/cssre 1=^3tylesheet n href^"loung©, cas^> 


老■冬 


要升级到 HTML 5, 黑要把 type ® 性 去掉。 为什么呢？因丸已经宣布 CS 5 作为 HTML 5 的标 
准样武，.这也是 HTML 5 的默认样式。所以删除 type 厲性之后，新的链接形式如不： 


<link rel= T, stylesheet' T href=^lounge ,C3S"> 


HTMLS 



::因 为你接 叟很快卜所以契■特别给你一份额外奖励，通过简化 scrip 麻记, 河以让 你：- ，-」一工 
的 B 子更好过。对于 HTML5* JavaScript 现在已经成为标准,同时也晕軾认的脚本- 

■ ■ ■ ■ ■ 气 ■ ■ ■ ■■■■ ■■■" ■"_ ■ ■■.， ■■■■ ■■_!■■ 二 ■ ■ ■■一 ■ ■ ■ ^ ■ ■ 

语言.#以同样岢以从 scrip^iST 中去除 ty— 軀性； — _ 去齡 ype 绣14芎的 Script 标 l 二 

B-ai ^ mi m - _ ■ a ■: 1 _ ■ I * _ _ ~ ■ ) * 

id* 下柘彔: r 二' … 

即值铢时如命：耔记汪； rm 也 

„ . L /~" 不用靼稍肩舦含介绍…… 

< ac【ipt 3 rc * t T _ Ioungei ] s _ X / ac ： ript > 〜 


或者，如果你有一些内联代码 T 还可以像这样写 script 标记= 


<* eript > 


var ： youRo^k ~ true ; ■4-^ 


</script> 


'.味 有 javascript 代运 
茚诠4这1。 


石还金( I 一岁介 



祝贺你，你已经通过认证， 
有能力将任何 HTML 升级到 HTML 5! 

作为一个经过培训的 HTMLS : o - Matic 用户，你 
已经掌握了所需的全部技能，可以把任何合法 
的 HTML 页面更新为 HTMi 5。 现在该动手实践了！ 


你现在的位置> 
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好啦，好啦，你知道的，到 R 前为止，我们一直在 
i 寸论怎么更新你原来的 HTML 页而，使它们也能利 
用 HTML 5 提供的所有特性。4以#到，如果你熟悉 
HTML 4,0 K 则肯定会轻乍熟路 T 因为 HTML 5 就是 
HTML 4.0 〖的一 个超集（从实用角度讲，就嚴 HTML 
4-. OI 4* 的所有 特性在 HTML 5 中仍得到支持)，傾耍做 
的就是了解*&何指定 doctype 以及 _< head > 7t 紊中的-其 
余 teB ， 着手使用 HTML 5。 

不过 t 你讲的也讳，我 ( Hi 兑得过于简单 r , KTML 5 
当然杏只是史新这儿个元素^它还包括很多其他内 
容。实际上^真正让所有太兴奋的是能够你建交 
互性的龠饰面（戒者 其至是 复杂的 Web 应用 i ¥ 为 
做到一点^ HTM LS^firr 一整套技术匕口 K 丄配合 
MTML 5 fe 记语言 使用， 



毒歡 | 


不过，先别着急^具体介绍这些内容之前，还要做 
点工4乍^确保我们的标记没问 




rpen your pencil 


没想到吧， HTML 5 标记居然离你这么近! 


|P I 


下面是 _ 些需要更新的老式 HTML , 请按照 HTML5Matlc 过程把这个 HTML 更新为 
HTML5. 可以在书上写写画画，把现有的标记代码划掉，增加你认为需要的新标记 
代码。我们已经提供了一点帮助，突出显示了需要修改的部分^ 

完成之后，输入修改后的代码（或者如果你愿意，也可以找到练习文件，直接做出 
修改），在浏览器中加载这个代码，你就能安心坐下来，欣赏你的 第一个 HTML5 作 
品了 。噢， 对了，你会在下一页找到答案。 

1下載达本丰的 ft 有代砝和孕剩文件， 律㈣ 

hi±p'//wbto( iM.a rt-W 他 


<rDOCTYPE html PUHLIC ,T -//W3C//DTD HTML 4.01//EN T, 

"http: //www .if3. org/TR/ktml4/str ret. dtd T， > 

<head> 

<title>Head First I*ounge</title> 

<msta http~oquiv= ,f coRt#nt-typa' 1 text/html; ch«9 ： set=*UTF-8 fl > 

<link ^yp«= 1 ' itexh/cB a ,T r*l = r11 违 tyl 鸯 &ht |T hra f= T, loung«. c . 癟章 Tl > 

<script type*"text/javascrlpt u arc*t T, losing*.js^X/scrip^ 

</head> 

<body> 

<hl>Helcpme t：o Head First Laung[e</hl> 

<P> 

<img arc—"drinks. gif" alt= T, Drinks"> 

</p> 

<P> 

Join us any evening for refreshing <a h.ref='Elixirs. html M >elixirB</a> ll . 
conversation and maybe a game or two of Tap Tap Revolution. 

Wireless accdds is always provided; BYOWS (Bring Your Own Web Server) 

</p> 

</body> 

</htnLl> 




你现在的位置 > 
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没想到吧， HTML 5 标记居然离你这么近! 


下面是一些需要更新的老式 HTMU 请按照 HTML5-o-Matic 过程把这个 
HTML 更新为 HTML5 a 可以在书上写写画画，把现有的标记代码划掉 ，增 
加你认为需要的新标记代码^我们已经提供了一点帮助，突出显示了霭 
要修改的部分 s 

下面给出我们的答案 n 


以下是更新后的代码; 


<! doc type html> 

<head> 

<title>Head First Loung^</tit.le> 

<meta charset=''utf-8 /, > ^ 


- 正嚴 ii+fi 电动 > 

f=Lrst ® 

威 ； 6 矣 正意义 i 的 HTMU^. a 


…… VuLtt&^-iZ ■ 


<link rel= w stylesheet^href—'lounge,css"> …… LlA 杉记 

<script src—''lounge.js ,f X/script> ^ 和 S6ri|it ： 杉圯。 


</head> 

<body> 

<hl>Welcome to Head First Loung«</hI> 

<P> 

<img 3rc="drinks *gif T, a 1 t= ,T Drinks "> 

</p> 

<P> 

Join ns any evening for refreshing <a href= T, elixirs, html">« 1 ixirs</a>, 
conversation and roaybe a game or two of Tap Tap Revolution. 

WireLQ 3 s access is always provided; BYOWS (Bring Yc>ur Own ffeb Server). 

</p> 

</body> 

</html> 

http ：// v ^ Udator . ws .^0/ 

你含 ，它含鲶证巧 
html^ 铯乇虚言， 
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认识 HTML 3 


tlierei£ire 

Dumb Questions 


这在老式的浏览器上也能用？就像这些新的没错 T 特别是在 HTML 3 得到100%支持之前 u 我们 
doctype , meta 之类的标记？老式浏览器怎么处理这些新会在这一聿以及整本书中介绍这些方* □ 


语法呢？ 

对，靠点聪明，也靠点运气 e 就拿 link 和 script 标记 
上的 typeA 性为例，如今在 H 丁 MU 中去捭这个属性是合理 
的，因为 CSS 和 JavaScript 现在已蛏成为标准（当然也是 
趺认的样式和脚本技术> d 不过，事实上，測览器早已 
经骹定默认使用 CSS 和 JavaScript , 所以标准一致，真是 
碰巧 t 浏览器多年前就 C 经对这个新标记标准提供了支 
持 • doctype 和 meta 标记也是一蛘 D 

= 那么新的 dOGtype 呢？看起来现在是不是太简单了？ 
甚至连版本或 DTD 都没有 ^ 

嗯，看起来确实有些神奇，使用了这么多年1杂 
的 doctype 之后，现在我们居然可以周单到只指出 " 我们 
在用 HTML ” 。事情是这样的： HTML 原先基于一个名 
为 SGML 的标准，这个标准要求槌供复杂格式的 doctype 
和 DTD , 新标准对 SGML 有所调整. U 的是同化 HTML 语 
言，使它更加灵活，所以我们不再需要复杂的格式 ，不仅 
如此，正如前面所说 ， 这里还有点运 汔成分 _ 几乎所有浏 
览器都只是在 doctype 中查找 HTML ，来确保在解析一个 
HTML 文档， 

1^1- 你说它不会再变了，不是开玩笑吧？我觉得对于浏 
览器来说版本非常重要 u 为什么不使用 <!doctype 
呢?将来还是有可能有 HTML 6 的，对吧？ 

答： doctype 的使用意味着浏览器制造商要使用 doc type 
告诉浏見器采用它们自己的“标准摟式"表现内容。既然 
我们已经有了真正的标准， HTML 5 的 doctypc 完全可以告 
诉所有浏 見荩这 个文档是标准 HTML , 不论它是版农3还 
是版本6„或者其他任何版本 a 

1^1* 那么，假设不同的浏览器在某个时期有不同的功 
能，该怎么处理呢？ 


f 5 ) 


这很貢要吗？我完全可以渝入一个不带 doctype 和 
meta 标记的页面，它也能很好地工作。我何必操心它是 
不是完全 IE 确呢？ 


答： 是的，浏見器很擅长忽略 HTML 文件中的小 蜡误。 
不过，通过包含正确的 doctype 和 rneta 标记，就能确:保浏 
E 器确实知道你想要什么，而不用乱猜。另外，对于那些 
使用老式浏览器的人来说，新 doctype 意味着他们将使用 
标准模式，这正是你要的，要记住，标准模式 是指： 浏览 
器会认为你编写的 HTML 符合一个标准，所以它会使用相 
应的规則来解释你的页而 D 如果你没有指定一个 doctype , 
有姿浏览器可能会进入 " 古怪模 式”， 以为你的 Web 页面 
是为老式浏览器編写的，知果标准不符合，就可能不正确 
虼解释你的页面（或者认为它编写得不正 确）， 

1^1 • XHTML 怎么了？好像好多年前就说它是未来发展 
方向 a 

原先确实是 a 不过，后来灵活性超越了严格语法， 
在这个过稃中 ， XHTML (准确地讲是 XHTML 2) 天折 
T t 而从人们蹁写 Web 页面的方式（以及浏览器表现页面 
的方式）来讲， HTML 5 更能让人接受„不过也不用担心， 
因为了醉 XHTML 能让你更好地编写 HTML 5 内容（你会在 
整体上更好地把 4 IHTML 5〉 s 硕便说一句，如果你真的 
喜欢 XML , 还有一秤办法可以用严格的格式写 HTML 5, 
以后还会详細介绍…… 


问 : 


什么是 UTF -8? 


答: U 丁 F 8 是一种字符编码，支持很多字母表，包抬 
非西方语言 a 你过去可能已经见过其他的字符集，不过 
UTF ，8 被推选为新的标准，而且，它比以前的字符编码更 
簡短， 也更容 m 
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哪些需要 






现在并丕要求你了解 HTML 5。 


如果你以前从来没有接触过 HTML 5、 也没有关系，不 
过你应该用过 HTML ， 还有一些基本内容应当知道，比 
如说元素，标记、属性、嵌套.语义标记和增加样走之 
_的区别等。 

如果你对这都不熟悉，我 TJ 有一个小小的建议（也赛个 
广告吧1 ;还有-本书专门介绍这个内容 "《Head First 
HTML with CSS & XHTML )), 你应该读一读。如果你 
对标记1^言还算熟悉 T 可以粗略 翻翻， 或者在看这本书 
时作为- 个参考 D 


我们还 存阳录中对 HTMLS 核记和 
C 3 SS 戏供？一个阇短的斿关。如 
果你只差恝幼逋地觎龙5擗籼充的 
* 料性，可 以羌看看本韦 4后®— 
部分。 
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HTJVt 厶 5 內典贺场 

本周访谈： 

最新版 H + ML 的告白 


认识 HT1ViL5 



Head First : 欢迎你， HTML 5. 整个 Web 都在谈论你呢。对我们来说，你看上去和 HTML 4 好像没 
太大不同^为什么大家还这么兴奋呢？ 

HTML 5: 大家之所以兴奋，那是因为我支持新一代的 Web 应用和体验^ 

Head First ; 没错，不过再问一句，为什么 HTML 4 或者传说中的 “ XHTML " 做不到呢？ 

HTML 5； XHTML 2 已经穷途末路了。所有写实除网页的人都讨厌它。 XHTML 就是把我们写 ] T 面 
标记的路重走一遍，让所有已有的页面都过时。我说过， ** 嘿，看我的，我不仅能干新工作，还 
能包容已有的全部” a 我的意思是，如果一个东西用得挺好，为什么还要重头再来一遍呢？这就 
是我的哲学 D 

Head First : 听上去在理。不过，你知道的，有些搞标准的人还在说： Web 最好遵循他们的"纯” 
标准。 

HTML 5： 要知道，我可不关心那些。我更愿意听写实际网页的人怎么讲——他们怎么用我，我能 
提供什么帮助？其次是创建 Web 浏览器的开发人员，最不关心的才是那些搞标准的人我确实会 
听 他们说 什么，不过是在与真正的用户没有分歧的前提 

Head First : 为什么不关心他们呢？ 

HTML 5: 因为如果用户和创建浏览器的人与这些搞标准的人意见不一，就会争论不休了。幸运的 
是 ，制定 HTML 5 规范的人都完全支持我，这也是我们的态度 & 

Head First : 再回到 HTML 的上一个版本，你说你是 HTML 4.01 的一个超集。这意味着你是向后兼 
容的，对不对？是不是表示你打算继续处理以前版本中的所有不好的设计？ 

HTML 5: 我答应过,会尽最大努力处理以往版本留给我的所有问题。也就是说，这并不表示这是 
对待我的正确方式。我 K 希望写 Web 页面的人能深人学习最新的标准，用最好方式的利用我。这 
样一来，就能让我充分发挥一技之长。不过 * 重申一次，我不会完全失败，如果页面没有更新， 
我也会尽我所能地显示这些老页面9 

Head First : 下一个问题是■…- ■ 

HTML 5: 好了，够了!你一直在问以前怎么怎么样。我们还没有谈到真正重要的东西。就我的 fe 
记而言，我个人的任务是包容现有的 Web ， 增加一些新的结构元素，让做 Web 开发的人日子更好 
过，另外帮助所有浏览器实现人员支持一致的标记 语义。 不过，我来这里的真正目的是介绍我的 
新用途： Web 应用 …- - 

Head First ■…”真抱歉， HTML 5 ,我们的访谈时间到了。非常感谢，下一次访谈一定会讨论你 
想谈的内容。 

HTML 5: 嗯，真扫兴！ 
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实际上， 宕鈐 核心是 #〖 nterMt 審户 e 芋必爯值 
用奥诞 Rashi 类妗插件來构龙客户现在我 
玎沭使用©布，转珐和 JavaSwipt 釗邃炷鎇的界 ® 
1 和动奐 D 


html5 太观 


真正的 HTML 5 请起立 


好了，谢谢你一直那么耐心，坐在这里听我们讲 " HTMLS - o - Mattc " ,相信你肯定在 
猜 HTML 5 远不止这些吧。如 今大街 上随处可见这样的标语：有了 HTML 5 就不再需要 
插件，它能用来做各种事情，从简单的页而到一流的游戏都能胜任，就像甜点外面一 
层的奶油。对不同人的来说， HTML 5 似乎都不相同 . 




12 m?# 








认识 HTML 衫 



( CSS 1 也布好多新沟窖订从 
结含 HTML 5 使用。 t £ 如 ，綫 
迭烽 S , 劫赛* 衊， ^ 1 ,还笮 
V 胖彩 r 


好消总： HTML5 囊括了以 h 全部， 人们谈到 HTML5 时，实际上指 
的是一个技术 “家 族”，结合这些技术，就能提供一个仝新的模板 
来构建 WebK 面和应用 0 
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mrtiis 如何 x 作 




魯 1 々 



HTML 5 到底如何 工作. ••… f 利 

0^5 "■ 11 

我 f 门说过 ， HTML 5 是由一个技术 w 家族"构成的，不过这到底是什 雜右，金命你介 

么意思呢？你应该已经知道， HTML 标记本身已经扩展为包括有一 广 杉记和 csss 属伐/ 

些新的元素 I 另外通过 CSS 3 对 CSS 也有大 M 补充，可以大大增强指 
定页面样式的能力 & 此外还有一个髙能“充电器”： JavaScript 有一 
组全新的 JavaScript API 可供你使用 c 


娜 


卜面 来看看幕后的工作，了解这些技术如何组合在一起 


0浏览器加载一个文档，其中包括用 
HTML 写的标记和用 CSS 写的样式。 


0浏览器加载页面时，还会为你的 文档创 建一个 
内部模型，其中包含 HTMLfe 记的所有元素 



htmf 


body 



1 title 1 

"""I 「 

script ,! Thl : 

H2 | 

i 

~l 

—P 1 

7 < 个 

em 

\ 


幵诒荀 喪砉思 5 f 对子 f + TML 中 
的基个 xf r 到孩器含舍 Ji — 个 
表矛茂 光棄的 的拿 r 把诠与所 
有 M 他尤舞故在一个蛊似铒的钱 
构中…… 


……栽们靶这 个树稃 
秸对象核螌 （ DOCWKK ^* 
object Modd ) ,线者雨# 衿 
PDM , 这本本中迳含着 H 更 
多笮关 PDM 的内容，©於用 
5 ® 增 灰行為 
DOM 袅个 S 筅耆麗的龙 
t (稍 ji 存第 af 将介锊这个 
内窖）， 


页硭 的样式（釦蓽有）由 c ^ sss 斿定， ii^UL 
畢系来 t 包 M J web 中广泛僅用的根 
多常用風格 (如明髟和 D # 以糎 ） e 


杉记耷 一# 给迸.比釦 元棄 中的杉记-另 
40缯加3—些允#芍供伎用 （本丰 含介绍科充的一咎无 #) 。 
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❹ 


is r 

在蓐 # 

浏览器加载瓦 面时， 还会加载 JavaScript 代 
码，通常沉海加载之后就开始执行这些代码。 

t 刊砌鋪3以递过钍耷否®交互 
1 —的用户或到笼器生截的$件嫩隹响在,或着心 
ft 有拓的 APL 



♦任顫承 


j Script d i^J^OM^ 员® 之虽 



布 


作 


0通过这些 API, 你叮以访问音频和视 
W m , 使用画布完成 2D 绘图、访问本地 
存储，还可以使用构建应用所需的很 
多其他优秀技术。要记住，要想使用 
所有这些 API, 需要用到 JavaScript 


APt 也行、 巧在用鵠伐麴口 
(ApjiUcati^ PK£>0r^tumin0 
r ^ rfaois ) t MfJi 5 -yfl 
对象 . 古法和恿 5 J 以用 
乎访闷 a 曲技木的辦奄功 
锥 * 这冬本中将介绍其中一 


认识 

JavaScript API 


地理定 
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htmf5 族成民 


& 命 :- ~w ^ 


鵪科 


% 


m 


-；/. 






我们一直在说 ‘ 技术玄族”，让人感觉它们好像就是二个家族。不过我们还没有正式认识这个家族的成 
员，现在就来认识 ，下 吧。你会在 T 面嚼到这个家族的大部分成员， 看看你 能不能搞清楚究竞谁做什么^ 

我 fHd 经帮你确定 f 个。不用拘，心，我们知道这是你第一次接触 HTML5 家族成员，所以本章最后会给 
出答案。 

用我你就能直接在 Web 页面上绘图 p 有了我，你可以绘伟巾文 

本1图像.线条、邸、矩形、罔案和梯度，我会让你成为真 
止的艺术家。 

.你在 HTML 4中可能用我输人过信息，不过在 HTML5 中我变 
得更出色。我可以要求你填写域，可以更容易地睑证你是不 
是在指定的位置键人了 EnrniK URL 或电话号码。 



cm 


Web 工作线程 


表单 


离线 Web 应阁 


眘频务视频 


新元素 


本她存储 


基布 


地理定位 


以前你需要插件才能支持我们 s 不过现在我们已经是 HTML 
元素大家庭的直系成想看点什么或者听点什么吗？你会 
需要我 们的。 

我们存在的宜义就足帮助明确页而的结构和语义含义，包栝 
提供一些新方法在洱面中建立分区、页眉 * 豇脚和逹 HiL 

我是这个家族里最时髦的 p 你以前可能用过我，不过你知道 
吗？现在我可以让你的元素运行动画，给它们最漂亮的圆角 
边框，苒至可以加阴影！ 

岈以在毎个用户的浏览器里把我当做本地存储來使用。是不 
是需要存储一些首选项或，些购物车商品？或者是不是为了 
提高效率想要存放一个庞大的缓存？我就是你想要的 API。 

是不是希望在未连接网络时应用也能正常 T 怍？我能助你一 
背之力。 

我能先诉你在哪里，还可以与 Google maps 很好地合作《 

如果你需要多个脚本在后台并发运行， Ih 你的阳户界面保持 
响.应性，你就会想到我。 
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第一琐任务 

浏览器侦察 

请四处走访一1 1 


关的一些资 

_ iP 0 RT ■咖 

毎沮浏览器咐性 


巧以到这里查找存 

t 新版本，对子， 

的支持水平打分 


如果得到支持 
g 你完成忏 


浏览器 


你的任务■… ■■ 

……（如果你接受这个任务> 是对所有 HTML 浏览器做一些侦察 D 你肯定听说 
有些浏览器已经支持 HTML 5, 有些还不支持 0 我们需要你仔细了解，因为事 

实上…… __一―- 


、參-认识 


Los 和 
Android 

M , 

沒 ㈣ 移\ 
姑 (4 备 )\ 
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挪览器侦察 



TOP SECUET 




第一项任务 
浏览器侦察 




浏览器 


尽管签署、密封和交付标准还需要一段时 □, 不过 〒在这 之前你就能用到充分 
支持 HTML 5 的浏览器。实际上，很多特性在现代树览器上巳经得到 X 广泛史 
持。这也產为计么现在就泫开始使用 HTML 5 的 1原因。另外还有一个好处 T 如 
果你现在就嘗手使用 HTML 5 ,你掌握的■前沿技术肯定会让你身边的朋友和同 


事羡慕不已. 


" ^萆&猓伴工资也畲涨! 


1 S 第谭 









婧等 一 T , 如菜戰视在开 诒儍用 HTML 5, 弈蝥老 
浏芘器的用户芨不星轼袖疙惰地油弃77或老，我是不 
蚤 tSl 两令眩本的 Web 页®,—个承尚支辩 HTML 5 的 
洌 览匾， 萁一令®尚那螫较老的洌览霣？ 


别急，深呼吸。 

首先;， HTML 5 是 HTML 的一个超集，所以你的 F 1 
标 fi _ 定是只与一个 HTML 苽 [SL 你说得没错，任 
何浏览器支持的特性都可能不同，这取决干当前 
的浏览器是什么，还要看用户对升级是否积极。 
所以，一定要记住 * HTML 5 的一些较新的特性可 
能末能得到支持，这就回到了你的问题上 来：如 
何处理这种情况。 


II 前， HTML 5 的底层设计原则之一就是允 L 午你的 
页面妥善地降级 # 这说明，如果用户的浏览器末 
能提供一个新特性，你就应当提供有一个有意义 
的候选功能。在这本书中，我们会告诉你如何编 
写贝面来做到这一点。 





♦ 


孜騾 




不过有一个好消总，所有浏览器都在朝着 HTML 5 
标准和相关忮术的方向前进（其至包括移动浏览 
器）， 所以过一段时间，妥善降级可能小再是一 
个规则，而更应算是一种例外情况（尽管你总希 
望尽缺为用户提供一种有意义的体验，而不论他 
们使用哪一个浏览器 ） d 
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Btml5 常觅蹄謎厂 


• ■■■■■■• 

- . >> 

Mh 






_ Jj 




k*M' : 




— r --:. 




J ■ . ■ 


«；q 


二二， ：严 **.- 我昕说在2022 单前都 不会放为最终推务严 ( v . Chfom . ^ Saferi , Rr：efpt : 还存 T *±| 移动视览_ .. 
f '-: 助 标雇卜是真的啤瘙这# ，:远宥什么 必要了 Jil 它昶十' :器; ■这个#另皇朱是变得越籴 M 混乱 fr 么 
W , — v : _ - : 们顧面这 些细览缸 祕用 【 

'.:— 你要知道他 们. 是一个保中的 ..团 体、 有多保守呢厂可攻这么 市场上对 乎-測 見器.（包括桌面■浏览.器♦移动讲览器 
-■：. v ： :讲 .._ 他们 甚至宁-愿等 封圮代 HTML 5 測览器出现又消卷后碟实存在大 f 良性免争,:但 实际丄 ，-其 专很多 调^ 

: 会签 邱个，^共关 匕过少 毛瘴轉会矣存,珂览于1用的 HTMLm 虛 S 矽 arr ,- 私及 . 

» 斛 _表标准专匕铽吟誕:7八_每和于 AV e bkif { i ； C —+ : .: 

… :为7,4終^标准能疋有疚时两上不过十亦源0坤氧#?|擎 a 来评 v : 你的灰面充金可 I : - 

^ , 20 i 4 羊前屋该舍有 ■不:春 定-的而1 姜4所禽:实 f 免泰上运转 T 根本不 -用你做 it 多:工作卜-:.」-、 

._... .能埤在 — H 7^ 却 錶祆铤 二€二. : 。.-::心:..:^:— ；；^； S 

—…一 一 --_ __ ―:一 一 - 一―-对今很多 用^本 


_ __ g；-■ 一： 一 - __~~^ _ - ■ ■ " ■ - _ ■ - - iw - - . - . j __ - ~ ■ . 1£1 '. ■ f , ■ 八 ' _^r~. 

々不命是什^了基秦 h :— _ 实; r 泛痒兩為灸表 
y - 1 :6办兵皂::士。▲择未“家 p 莓 it 祕舨硪^^：在准乂 、: 

^ : 韦會戎.■^备患: _ 畚參辉本的办 ML 铨杯 T ^ 箕葳 

■3:: 垮石舨设 tf ▲麻-‘奉 

■■ 一 ■■ 「 ■ ■ - ■ J ' ■ ■ i ' ^ ■_ _；• *■■■■•• /. ■■■ ，：.'：_■ ■■ • ■<-■；- ■••■■: - '.. . ■ _：• ' -T . _■ ■■■ -，—.：_ J j ■： _. •■」•_■■- s . :■■••■•_、■寺 r _ i . 
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纖 _S 謎 S 謹繼 SS 纖 



玳码?34逋货资_^些媽璋 ru 雜&费％起来: 



l^ u .f 


I■:•■■■^ ■:. 


<script> 

walksLike =： 
^oundsLike : 


: T- 1 


var 


■var 

if 




J 


^ ^ ^ ^ ： ^ ~ 

; sonridsLike.innerHTML 


duck ^; - r - - .. “ “十 ：' 

doc:ument T getElementById< M sound&like t， ); 

巧❿:：.嚴东)如 dU — 乂 i ：-—::..' 
: 〆 表.示蝥乙毋-_:- 
® id ~ -'"' 

-• 芍 - 能斋 hVml 走潦和 1(^ 

^ ■ ： ' 、二-'二二 


{ waIksLiIce == '” dog ”|. {.. 

::: soundsLilte . inn©rHTML - f^Wopf 1 ttoof ”_」; 
elo^e ±£.. (w*：iksLike .»* H dudie*■- 》 t:: :Si:i. 
& ndi Slice. i n ne r HTMir-^= '^jiack f >Qiiack 



——：-."i 


' Crrckets ..^ 




: </ script ^ 
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我们得谈一谈 了。 

如果你看过我彳 I I 的 《Head First HTML & CSS )) { 或者更准确地讲，如果你仔细读 
过这本书，而没有把它当柴火烧掉），相信你可能已经很好地掌握了如何使用标 
记语言和样式表创建漂亮的 Web 页面。了解这两个技术会对你很有帮助…… 

不过，对干 HTML 5， 情况发生了改变： Web 页面已经变身为一种富体验（以及成 
熟的应用），不仅有行为，可以动态更新，还可以与用户交互。构建这种页面需 
要一些编程，如果你打算为浏览器编写代码，只有一条路： JavaScript 。 

我们食存 

如果你以前做过编程或者写过简单的脚本，你会很轻松 ： JavaScript (尽管有一 
些不好的传言）是一种绝妙的语言，本书中，我们会带你了解编写应用需要知道 y ^^ i t 

的全部内容。如果你以前从未编苟过程序，我们也会尽全力带你 上路。 不论哪种 
情况，都会发现 JavaScript 的-大好处：初学的程序员可以很容易地上手。 

那么现在做什么呢？先来简要介绍一些 JavaScript 知识，然后在第2章再深入研究 B 
实际上，对现在来讲，先不要纠结干后面 几页的 每一个细节，我们只是希望你对 
JavaScript 有点感觉> 


法来 f 幻 
rtf 重! 


你现在的位1 ► 
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ffl JavaScript 能傲些什么 ? 

JavaScript 为你的 Web 页面打开了一个新的世界，提供了 
丰富的描述和功能^下面来看利用 JavaScript 和 HTML 5 
可以做的一些事情…… 


使页面掌握位 萚信息， 
知道你的用户所在的位 
置，向他们显示附近有 
些什么，带他们进行目 
标排查.指明方向，或 
者把有共同兴趣的人汇 
集到同一区域。， 


使用 Web 工作线程可以提高」 avaScript 代码的效率， 
完成一些复杂的计算，或者使你的应用更具响应性 
甚至可以更好地利用你的用户的多核处理器！ 


访问任何 Web 服务，并将数 
据（几乎实时地）传回应用^ 


使用浏览器 存储在本地缓 

存数据 ，提高移动应用的 
速度 a 


不再需要特殊的插 
件来播放视频^ 


使用 HTML 和 JavaScript 
创建你自己的视频回放 
控件。 \ 


将你的页面与 Google Maps 
集成，甚至允许用户实时地 
跟踪他们的移动轨迹。 


JavaScript : rH 、 


采用新方法与页而交互，这些方法 M 时 
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利用 JavaScript， 你可 
% f 浏览器中）存 储大最 
数据，甚至可以离线访问 


浏览器肯定不再只是应付枯燥的 
文 档了。 有了 JavaScript ， 你可以 

直接在浏览器上画图。 


用 java Scrip t 可以让你 
的表单如虎添翼，提 
供真正的交互 性。 


使用 javascript 的强大功能，可 
以在浏览器中完成完备的视频 
处理。不仅能创建特效,甚至 
可以直接处理视频 像素， 




你可能以为我们肯定是在网上査了很多 
才找到这样一■些最让人兴奋的例子.是 
不是？你错了。我们只是章出了本书中 
几个例子的截屏图是不是惊到了？居 
然这么酷！既然我们已经身处 Web 镇， 
就要学会这里的方言： JavaScript , 来 
吧，出发吧。 
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认识 javascnpt 

JavaScHpi^ 

本周访谈： 

脚本语言的告白 

Head First: 欢迎你， JavaScript. 很髙兴你能从百忙中抽出时间来作客。我们开门见山 
吧， HTML5 如今声名鹊起，你怎么看？ 

JavaScript: 我可不爱出风头，我就是默默躲在幕后的那种人。这么说吧，很多功劳本来是我 

的，可是都算到了 HTML5 头上。 

Head Rrst: 怎么这么说？ 

JavaScript: HTML5 的工作需要一整套技术，比如 2D 阃布、本地存储、 Web 工作线程，诸如此 
类，不过事实上，是我，对，就是我 JavaScript, 在真正使用这些技术。 HTML5 只是为你提供 
了一个场所，可以把这些体验融合在一起丧现出来，不过如果没有我，你根本不会得到任何有 
趣的体验 & 不过没关系， HTML5 加油吧 T 我会继续做 我肖己 的事情 
Head First: 你对新人门的 H 丁 ML5 程序员有什么建议？ 

JavaScript： 很简单，如果你确实想掌捏 HTML5， 一定要花点时间学习 JavaScript, 还要了解与 
HTV1L5 —间使 用的所有库。 

Head First； 要知道 T 你的名声可不算太好。1998年有评论这 样说： K JavaScript 最多也只是个 
半成品，一个憋脚的脚本语言。” 

JavaScript: 真让人伤心。尽管我问世的年代还是多事之秋，众多编程语言还没有形成一个清楚 
明 f 的规范环境，但是一直以来我都是使用最广泛的编程语言之一，所以我不会那么快丧失信 
心*不仅如此，已经补充了大量资源着力使我更健壮，行动更迅速，与十年前相比，我至少快 
了 100倍。 

Head First: 太让人佩服了 

JavaScript: 噢，对了.你可能还没听说，制订标准的人已经告诉我现在我是 HTML5 的 
默认脚本语倉 D 所以，我会一直在这 里 [1 实际上，你甚至不用再在 < sc 『ipt> 标记中明确 
指出 ^JavaScript" 1 998年他们可能认为我憋脚，不过你再看看 * 如今还能不能找到 
JScript. VBScript. Java Applets 和所有那些失败的浏览器语言的踪影？ 

Head First 嗯，听上去你确实是创造一流 HTML5 体验的关键。不过，对你的评价真是毁誉参 
半， 

JavaScript: 尽管有些负面的传言，但我是一种功能非常强大的语言，所以你确实应当花些时间 
来好好学习我，另一方面，我很流行，因为 JavaScript 的上手和使用都非常容易。我在这两方面 
都有绝对优势，不是吗？ 

Head First: 听起来不错！谢谢你， JavaScript, 感谢你与我们交流 a 
JavaScript; 我也很荣幸 





^ 1 - 



金挪 
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編篡 iE 式鈐 4avaSeiipf 

谈论了这么久 JavaScript， 相信你肯定想深人了解它 
到底是什么。否则这本书也不会叫做 Head First, F 
面会给出一个超级正式的商业应闬 D 对现在来说，你 
先仔细看看代码，找点感觉 5 你认为每行代码要做什 
么？请写下来。不用担心，我们并不指望你现在就无 
所不知，不过相信你肯定能对这些代码的工作猜得八 
九不离十 4 另外，写完之后，翻到下一页，可以看看 
你猜得对不对…… 


var drink * ° Energy Drink"; 
var lyrics = T， °; 
var cans — 99; 


while (cans > 0) { 

lyrics = lyrics + cans + *' cans of r _ 

+ drink + '* on the wail <br> 11 ; 
lyrics — lyrics + cans + M cans of ,T 
+ drink + "<brV; 

lyrics = lyrics + "Take on« do>m^ pass it arounet f <br> T, ; 


i£ {cans > 1) { 

lyrics = lyr±cB Hb (cans-1). + u cans of 
+ drink ^ ，T on thet wall <tnr>^; 


elae { 

lyrics = lyrics + u No more cans of 
+ drinlc + M on the wall <br> ,ir ; 


cans = cans — I; 

) 

do cum 抑 t: ■ wr ite (lyr icsj:; 
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你的第 - *个 javascdpt 

编写 1£ 式的 JavaScript ( 級 ) . 

再仔细读读这个代码，看看你猜对了没有 a 现在只是希望你对 
代码有些感觉，稍后就会逐步地详细介绍。 

vox drink = f, Energy Drink ”； 

va£ lyrics = ,fn ; 
var can^ = 99; 

while (cans > 0) { 


lyrics ^ lyriea + cans + ■• cans of '* 

+ drink + 11 on the wall <br>'%- 
lyrics = lyrics + cans + " cans of M 
+ drink 4 - r, <br> ,T ; 

lyrics = lyrics + "Take one down, pass it around,<br>"; 
if (cans > 1) { 

lyrics = lyrics + {cans-1) + ” c^ns of " 

+ drink + u on th« wall <br> n ; 

) 

else { 

lyrics ― lyrics + “No more cans of '* 

+ drink + H on the wall <br> ,T ; 

} 

c：ana = cans - 1; 

} 

docTunent .write (lyrics) ■ 



声明一个 if ，再将它懷徭七 " eiA/rgu 

# H PR ^ 

PnairtJe . 

声明另一个变把它铽 a 鈞一 个空， 

4 声明一个变 f . 斌 —个數 

个 whiu 榑钚。它 相达， P,M ⑶他 
Afo r 就 t 漱丈#咢二间的 

nu . 

值用 5 埒穿 连招# 作符 “ + ― , M 下一 
行被 1_C ^ iff f ■) i # Lt4riCr£ n 

用一个 锃衆 H ,. 

為傲 阉样的 1(1 一毕竞 d 欲曲和 丑这辑 
的. ^<€t 


嫌加 T — 旬 .阂样 f 僅用耷斜 

釦果 iJW 余 钕科缠 （也軚 ca^ii 
彳 1 ) …… 

■，… ' 坩加&洛 


…… 所以存欲碑嚴居增加 Ni > n^ort 

cai ^ r， A 




flyiriM 中， M 以现夺苦诂 mb 否®将肷 
碑奚出来< 这说蜱 a 个字符孕含增加的 
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认识 HT1VIU) 




运柠测试 


<»doctype html> 



你是不是觉得这个练习很难，但还是没有真正上手试^试」 avaScript , 
是吧？现在你要做的就是把上一页的代码（连同下面的 HTML ) 输入 
到一个文件中（比如 index . html ) ， 然后在浏览器中加载这个文件。 
你会看到下面的结果： 


檢入达个 


tefi , 鎏下载本韦的 M 耷代砝和子剩殳 4, i^^http：// 


<haad> 

<meta charset= TI utf- 8 T, > 

< title>My First JavaScript </ title > 


</head> 

<body> 



包呢 javascrift 代 H 的<&—七>和 </^rift>^e f 苦诉否 
泰它们 ;^ 间忽 ® 的丙銮 4java^Sc>ipL 系不甚 HTT^U 


< script > 



奋 ci 轚餘入 f — 迈跑 avflSciript 

HU , 


</script> 

</body> 

</html> 


这行 ii 个代砝 的淛 试结菜 9 这个代 
4 含; 6 榷 1 ： 的歡錐装 導述功 能伐故 
科釗建 宪整的 歌诘，冉抵±本骂入到 


抵器 ± 柚 , 



mm: 


^ni of 




M 




藏督私二 




，an ^n..fm 


1 l 
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更多 mm :: 


flierei a 

Dumb 


are x\9 

Questions 



陶： 

他内容？ 


为什么这个 HTML 体中除了脚本没有其 


答 :我们选择从一个空的 HTML 体开始，因为 
这个页面的所有内盆都是使用 JavaScript 代码创 
建的 c 当秩，也可以直接在 body 元素中揄入这 
些歌词 (工作 J ■可能不 小）， 或者可以让代码 
帮我幻艽成这个艰巨的任务（我们正是这样做 
的 ），然后让代码用 document.write 将歌词插人 
到页面中。 

要记住，这里只是冰山一角，本书还会用很多 
篇幅来介绍如何用代码为页由填人内容 n 


问 


我们构建了这首歌的全部歌词，这一点 
我明白了，不过 docsument . write 做什么呢？另 
外.文本是怎么放到文档中的？ 


问： 你反复提到 Web 页面和 Web 应用；这两 
个词有什么不同吗？怎么才算是一个 web 应用 
呢？ 

¥•_ 这个问題问得好，因为我们的提法并不严 
格.这两个词之间没有绝对的 差則； 换句诺说, 
要把一个用 HTML , JavaScript 和/或 CSS 编写的 
页面变成一个 Web 应用，并不需要你做任何特 
殊的工作^所以只是看法不同而己。 

如果一个页面表現得像是一个应用 s 而不只是 
一个錚态文挡，我们就可以认为它是一个 Web 应 
用，而不仅仅是 Web 页面，我们认为应用应该 
具备一些特点，比如维护大： i ： 状态、管理与用 
户更复杂的交互、无需页面刷新就能炅示不断 
更新的动态数椐，或者甚至可以完成更复杂的 
任务或计算 d 


•您， document . wrke 会取一个文本争， 
把它插入到文档中 D 实际上，它会在 script 
标记所在的位1褕士这个串 g 所以，在这 
里. docLiment T wr 〖 te 将把文本串放在页面体 


嘿， JavaScript 是很棒，不过 CSS 呢？ 
我皁都听说 CSS 3 的〜些新玩艺了，我真是迫 
不及待地想用上这些新特性，好让我的页面# 


上去更漂亮， 


接下来你就会看到，利用 JavaScript ， T 以采用 
更多复杂的方式修改一个动态文档的文本，不 
过，这个例子只是让你悉受代码如何动态地改 
变一个页面 D 


答 二是啊 t CSS 有了长足的发展，它与 
HTML 5 能合作得这么好也让我们很裳惊 d 尽 
管这本书不是专门介绍 CSS3, 不过我们肯定会 
充分利用它的一痊新功能的。你可能知道，原 
先在 HTML 中利用图像增加围角边枢和阴影时， 
以及利用 JavaScript 增加简单的动承时，需要很 
多技巧，而巩在所有这些利用 CSS3 轻轻松松就 
能办到 0 


所以， 没错， 这本书确实要利用 CSS 3 的强大功 
能，用到时我们会特别指出。 


28 第!章 











我们 e 羟谀到很多的容，包蛞 HTMI # \ 

ie , JavaScriptAPU "枝本象族*，还 ) 
有 GSSI 到成 f 十么 JIHTM 15? 能让太幸 
如 it ; 旮贵定不 R 是谬为标铊吒 . 


、任郵承命 # 


下面铪出我们的非官方答案： 

HTM 15 

a 

标记 + JavaScript API * CSS s 奋薄著 ， r 

要知道，大多数人谈论 HTML5 的种种承诺时，实际 
卜就 是指所有这些技术的结合。也就是说，我们会 
用标记来搭建页面的核心结构，用 JavaScript 和所有 
相关 API 增加行为和新功能，另外用 CSS 为页面增加 
样式， 它们结合在一起，这些就是我们用来构建末 
来 Web 应用的技术。 

那么，为什么说这是非官方的说法呢？嗯，有些人 
喜欢严格区分这些技术,并区別它们分别属于哪个 
标准。这很好，也是有意义的。不过，我们真正关 
心的是：浏览器提供了哪些技术，能不能用来制作 
我们的页面和应用？ 所以， 我们说 HTML5 就是标记 
+ JavaScript API+ CSS, 而且我们认为，人们作为一 
个技术谈论HTML5时 T 通常就是这个意思。 
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祺贺你， 你&羟 镌奔: J 穿 

/章，洱夂銕® 3你的第— 
个 H 丁 JV* 厶 5/ 




挪 




洛參 


# 


这奄汸的蓽一个 
Ja^sript^ilr 


翻到下一竜之前，你还要带些任务回去 D 用下 
面的磁贴填写以下公式，回答问题：：“什么是 
HTML 5?" 要当心，这堆磁贴里特意放罝了一 
些扰乱你的诱饵 D 完成这个问题后，可以休息 


K , 放松放松，准备进人第2章。 



| HTML5 1 

1 


CSS 


JavaScript API 



I 

文档 ] 


w 沾工 作线程_ I 

1 .■■■ 1 I I ■■ ■' ■ »■ 1 II 丨丨■— 
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^^BUliET POINTS -- 

« HTML 5 是最新版本的 HWIU 它弓 EA 了简 ■ 
化的标记.新的语义和媒■律元素，另 L 外 
要依赖于一组支持服匕 应用！ 的 JavaSaipL 

库。 

m XHT/VTt 不再是 Web 页面的标准 6 幵发 
人艮 _3 C 决定还是继■续擠展和改进 * 



HTML5^h\ 了一 些元素，可以向页 _ &增 
加铞的语义 t 与 HTML 4.01 相比 T 可以提 
供更多选项来创建 Web 页面结枓。本书— 
并丕 打算+ —— 介绍^ 不述会在附 录中给- 
出'一个简短的指南 

HTfVICS 中的艰多新特性都需要 JavaScript 


HTML , 

^ _ 新更为简单的 HTML5 doctype 茌较老 
梅浏览器-上也得到支持，这些浏 览髂看 - 

- 势 ffi 个 dooype 时会使用括准模式^ 

a < script >标记或指向 CSS 的样式表链接中 
不再需要 type 属，性。现在」 avaScript 和 (3S 

- 是默认类型。 

r 

■ 用子指定字符集的 <meta># 记已经大丸- 
^ 简化， R 包含字符编码 d 

" m UTF-8 现:在是 Web 上使用的标准字 符集。 

p m - 对€10^邓0和<0 ; >61於标记做出修改不会影 
t 响页面在较老浏览:器上_ 示- 


来充分加以利用。 I 

s 通过使用 JavaScript ， 可以与 DOM 交互，^ 
也就&文档对 SM 莫型 (Document Object 
Model) „ 

E 

n- DOM 是 Web 页面的浏览器内部表示。通 
过使用 JavaScript ， 你可以 i 方问元素、修 
改元素》还可以.向 D0M 增加新元素^ 

m=r JavaSciipt API 是一个 44 应用编程接 "P” ， 

利甩 API T 可叹控制 WM& 5 的所有方面， 

比如 2D 绘图、视频回放等等。 

s J ava Script 是世样上最流行的语：言之一 □ 
最近—几年 ■, JavaScript 实现有了显著的改 

进. 


m 




MHTMIL5 的新元素是 HTMt 4 元素的，个尋 
.集，这.说明，.较老的页面在现代浏览器 
t 仍能 作 - 。 " " 

TT • ■ - » ■ ■ ■ . » ~~ ■ * — , 

按官方说:法，搞(^5标准在20 14 年前不 
会正式完成&不过大多数现代浏览器在 
此之餘就能提供支持（现在就有恨多浏 
览器支持 HTMk5) t 


-可以检彌上 个 - 辨埯器中是甭支持某 ^- 
特性，如果芣支持还能够妥善地降级。：乂 

tt — CSS 是 HTMfc 5 的样式准，很多人 - 
用 " HTML .5" 描述创建 Web 应用所用的- 
技术家族时1都包含 CSS , _ 
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HTA ^5 瑱字游珙 

现在让你的右脑休息一下，活动活动左脑 a 这些词都与 
HTML 有关.而且都能在本章中找到。 




鉍 ㈣ 




横向 

1 _的插件也称为垃圾 a 

8. 通过3个步骤整理 HTML 5 的产品。 

11. 你的任务是浏览器 . 

13. HB / IL 5 真正的功能是 JavaScript _ 0 

M . JavaScript 比十年前要快 _倍。 

使用一个_循环打印一首歌的歌词。 

收到抬头是 "DearJohn" 的信。 


纵向 

1 -^是一个 Web 页面的内部表示^ 

3, HTML 5 之前的 HTML 版本。 

<-> 标记告诉浏览器后面是』 avaScript ，而 

不是 HTMU 

我们希望 Web 体验能_地降级。 

6. 比 HTMW.OI 版本简单得多^ 

7. HTML 5 的标准脚本语言^ 

1 HTML 5 中 link 和 script 标记不再需要这个属性。 
10. HTML 5 的官方样式标准。 

12- HTML 中的新_可以增加语义和结构^ 
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认识 丄 f 






♦ 


• 鲁寡 

我们一直在说“技术家族 51 ,让人感觉它们好像就是一个家族 * 不过我们还没有正式认识这个家族的 
成员，现在就来认识一下吧。你会在下面看到这个家族的大部分成员，看看你能不能搞清楚究竟谁做 
什么。我们己经帮你确定了一个6不用担心，我们知道这是你第一次接触 HTMLS 家族成员，下面给出 

° ,用我你就能直接在 Web 页面 ]：. 绘图 & 有了我，你可以绘制文本、 

' /图像、线条、圆、矩形，图案和梯度 D 我会让你成为真正的艺 

术家。 

Web 工作线程' _你在 HTML4 中可能用我输人过信息，不过在 HTML5 中我变 

得更出色。我可以要求你填写域，可以更容易地验证你是不 
是在指定的位置输入了 Email、URL 或电话号码。 


表单 


离线 VVeb 应用 


眘頻备视频 


新无素 


本摊#储 


甚布 


地理定忮 



以前你需要插件才能支持我们，不过现在我们已经是 HTML 
元素大家庭的直系成员9想肴点什么或者听点什么吗？你会 
需要我们的 a 

我们存在的意义就是帮助明确贞面的结构和语义含义，包括 
///提供一些新方法在页面中建立分区、页眉、页脚和导航6 

我是这个家族里蕺时髦的。你以前可能用过我，不过你知道 
吗？现在我《1以让你的元素运行动画，给它们最漂亮的 岡角 
边框，甚至可以加阴影！ 

4以在每个用户的浏览器申-把我当做本地存储來使用。是不 
是需要存储，些首选项或一些购物车商品？或者是不是为 r 
提高效率想要存放一个庞大的缓存？我就是你想要的 APU 

+是希望在未连接网络时应用也能正常工作？我能助你* 
臂之力 & 

我能告诉你在 哪里， 还可以与 Google m 叩&很好地合作。 

如果你需要多个脚本在后台件发运行，让你的用户界面保持 
响应性，你就会想到我。 


你现在的位置> 
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HTML 5 镇字游珙考案 




m 



0 
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2 介绍 JavaScript 和 POM 




龟 i 








JavaScript 会带你进入新境界。你已经 f 解了 HTMLfe 记 

(也称为结构）， r/5 比知道了 CSS 样式（也称为表示），剩下的 

就是 Javakdpt (也称为行为）。如果你只知道结构和表示，当 

然了，创建一个漂亮的页面是没有问题的，不过它们只是页而 

而 tL 用 JavaScript 增加行为时，你就能创建一种交瓦式的体验。 

或者 t 还可以更棒，你能创建完备的 Web 应用。 准备好 丫吗？ 

下面就在你的 Web 工 具箱黾 增加一项最有意思、功能最全的技 

能： JavaScript 和编程！ ^如 集还 觉绣鉍力不足坪么 g 

〜有一 个淺由 ，这也 I 鼉曄 铁的 

技钱！ 


这是新的一章 35 






如何 

JavaScript 的工作方式 

^们的目标是编写 JavaScript 代码. 加载 Web 页面时在浏览器中 
运行。这个代码可以对用户的动作做出响应、更新或修改页面 * 
与 Web 服务通信，总的来讲，可以让页面感觉更像是一个应用 
而不只是一个文档。下面来看这是如何做到的： 




龟 i 







t 命 

♦僉翻承參 



你创逮 HTMLfe 记和 
JavaScript 代码,并把 
它们放在文件中，比 
如 i 兑 i n d e x , li t m 1 和 
index .js (或者， 也可以 
都放在 HTML 文件中 ） a 


浏览器获取并加栽你的页 
面，从上到下解析它的内 
容， 

遇到 JavaScript 时，浏览器 
会解忻代码，检査它的正 
确性，然后执行代码 D 


JavaScript 继续执行，使 
用 DOM 检査页面，完成 
修改、从页面接收事件, 
或者要求浏览器从 Web 
服务器获取其他数据。 


浏览器还会建立 HTML 页 

向的-个内部模型，称为 
DOM 。 
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JavaScript DOM 


阁 JavaScript 能傲讦么？ 

—■旦有一个包含< script > 元素的页面（或者包含卩 I 用， 
指向一个单独的 JavaScript 文件），你就已经开姶编写代 
码了， JavaScript 是一个完备的编程语言，用其他语自能 
做的事情用 JavaScript 同样能够做到*甚至还能做得更多， 
因为我们就在 Web 页面内部编程！ 



你可以要求 JavaScript : 

❶ 建交—个语句 

创建一个变置并赋值 h 让变霾相加' 完成计籌，还可以使用 
一个 JavaScript, 的内宣功能， 



var temp = 98.6; 
var beancounter = 4; 



var reallyCool = true; 
var motto = T, I Rule"; 

^emp ~ {temp _ 32) *5/9; 
motto = motto + " and so do youV; 
va,jr pos * Haith. (); 


o 重复傲事惰 

反复地完成语句，次数可以根据你的需要来定 

while (beancounter > 0) { 
proceasBeansO ; 

beanCoun^teir — beatiCounter - 1; 

1 

o 做出判斬 

编写根据应用的状态并按条件执行的代码。 

if {isRea 1 lyCool) { 

invite = ,f You f re invitedl ,T ; 

} else { 

invite - 11 Sorry, _e，re at capacity ."； 
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IMI 变發 


声 硪变量 


变觉可以存放东西^利用 JavaScript , 变 i 可以用来保存 
各种不同的东四 D f 面来声明…些变藍： 


var winners 


^ 蝥數 ^ 

2, 或琯 电數憋 。 


var boilingFt = 212 . 0 ; 
var name = "Dr, Evil ”； 



或者，可 w 基幸符孝 (mvs 

^ M » s 6 , 


var isEligible = false; 咸者 - 个 4 念作， Sptmt^ 


创建変盪的 3 大 步骤： 

①飞 ® ® 



var scoops — 10; 


0 第一步是声明变 M , 这里就是变 ftscoops a 注意 

JavaScript 勾有些语#不同，小需要为变量指定一个类 

型，它只足创建-个通用容器，其中可以存放多神东 
西： 



scoops 



存歆 值的帶 
標 JavaScript 

变 鵞浼有 严柃的 
粦墼，斯菸任佰 
变 f 都可妒存敢 
数字、串或布亦 
值。 


② 


F —歩需要一个值放在这个变量中。可以用多种方式 
指定一个值： 

免苟 Wt— 个字 ® d 如一个盘 


var scoopa 
var scoops 
var scoops 


10 ; 








残辛，这个 (£ 也 3 以 4- 个表 ci 
式的餚果。 




V J ^ ^ ^ 

tot 基 1 Scoops / people; _ 

Math.random 0 * 10; ^ ^ ^ 

V tf ' 3-个_棄 M ㈣ 連- 
后辽全介绍 达个冱數如 ㈣ 
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JavaScript DOM 


最后，我们已经有了一个变量，也有了一个值[一个 
^字面值，如 I 0 t 也可以是计算一个表达式的结果（如 
totals coops / people )] ,现在要做的就是把这个 
值赋给这个变 



scoops 


当然1 一 a 创建了一个变優，你叮以在任何时刻改变 
它的值，甚至可以改为一个不同类型的憤。下面给出 


几个例了 _ : 


scoops 


scoops 


5 


_ g y. 把曾糸设 i 

於另 _ 个整 

r —_ 或寺甚 g 芍以在 汝变这个変 
scoops * 10;达 I SMOpS 鸩変 A 氣 


scoops = r, Tired of being an integer"; 

" T " 另外，刁 i ^阌时的 ft 和类 
scoops " null; 智 ,. 杏这 霣舍龙 ■ 怒政 4 ■" ■ 个宰。容士 

, 如果伪以光个數字，迖 
\ 苟触含岑改 rt 鸪出现丈闷趁。稍后金介 

威老. Javas_t 中 这有一 绍滋个尚容 e 
个乍表孑 t ㈣ 



诔法趣麥 



■ 每个语句都以一个分号结束。 

x = x + 1; 


H 单行注释以两个斜线开头。注释 
就是为你或其他开发人员提供的 
代码说明，这些内容不会计算。 
// I’m 己 comment 

■ 空格没有影响（代码中几乎到处 
都有空格）， 

x = 2233; 

■ 宇符串用双引号包围。 

"You ru!e! TT 


■ 变量使用 var 和一个名来声明。不 
需要类型，这一点与其他一些语 
言不同。 
var width; 

■ 布尔值 true 和 false 两边不要加引 

s 

5。 

rockin = true; 

»声明变量时不一定要指定一个 
值： 

var width; 




我 f } 含奋后®介绍如 



Dumb Questlg 


m 


如果我这样写，变里的值是什么呢？ 
var winner; 

It 执行这个语句之后，变量 w i n n e r 会賦值为 
undefined ,. 这也是 JavaScript 的一个特珠值和类 i 5! L 本-朽 
后面会介绍在什么情况下用这个诅，以及如何使用。 


1^1* 我见过其他编程语言，其中声明变量都要指定一个 

类型 a 比如 int X — Stringy a JavaScript 没有类型吗？ 

: JavaScript 当然有类型，不过与你以前用过的语言不 
同， JavaScript 采用的是动态类型，也就是说，你不必指[定 
一个类型， JavaScript 解绎器会在代码运行时确定要使用什 
么矣型， 
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命名 

如何命名変量 

你可能想知道如何为变 M 选择名字？如果你以前 
在 HTML 元素中指定过元桌 id， 会发现 变量与 id 非 
常类似，创建变 量名只 有几条规则。 

规则吒 耷蚤要 认一令字母、7划线或者 
巽元符开头。 

命名变量时，要想有个好的开端,不 W 要有一个 
有倉义的名字，还要使用一个字母（可以是小写 
或大写）.下划线字符或美元符开头。 r 面给出 
几个 例子： 









叙子、串和布尔在 JavaScHot ; 中翻針 

您 | 型“变童中还“存中放都為卜 

种 a 对象。很快就会谈到对 

Skf 迕 ff 你可以把对象想成是一 
二东西的集合，而基本类型只是一个 
东西.不能再进—步分解了,， 



var ^hislsNotAJoke; 


var _ my Variable ； 
var $ impor tantVar; 



至运辑 . 




用不含#的符咢作扣〜）丹头 


var 3 zip; 
var %entage; 
一 var --approx; 


f 

* .■函 


不钱 a 样 



规則巧 ■•然 后玎吆使 ffl 任葱多个字母、数字， 
7划线或奚元符。 


继续用字©、 羌元符 和下划线创建 变量名 如果愿意， 
第一个宇符后面可以有 数字： 



my 3 sons ； 
cost $; 
vitaminB12; 

^ is 样…… 


有个空格， iil 不 t 锷的。 

.奇％ +说咢。 K 不芍 
Vj * , ii ^ t 


J var zip code; 
var first-name ; 




var to 十 do; 
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^■ ■ ■ ■ ■_ 

JavaScript DOM 


， 苗 :. 、儀， 

ItfW:Kf 


规则峨广定瞿遵开 Jav 沾 mpt 齡所有保留多 


:二 7 j _ aS gp t 隹僉很 fcbimf , else , whiJefPfoT (这: S # 其电儿 系奥圣广二；^- 
- : 3 歹卜 > 如果疼 1 尤图南这些保 留幸也 为 f 尔的变盛名 V Java 》 出 pt 可能臺_不客 _ % F j -立 
丄」, H . 等出 '个 iava & ript 保留卞列衣。蹕作•玛 个芾 要你 i 豆佳这些谭黃字，:任辛>]二二」 
『^ SvaScdp ^ 奔 if 屯到觀口不‘ 4 ㉖ 瘃困惑心辱 riptM ? 率会蜂 
it 说你每 i 有问鵠 卜，苡是_華^ : * 不是我用#-^:读留老 . U 工一 


abstract 

as 

.■ _ . -■ ■: 

bootea ^ 

'■■break ： 

■ : 
casa 


delete 

- "._ 』 _ ■• 

do 

- ■ ■ 墨 ■« 、， 

double 
else ：v ； 

enum . 

■- _. .■■■■』 

export 


gblb / 

if : - L 

■■ _ * . • _ _■ __■■■_ . ■ 

innplemefrts 
import . v , 
in : 

instance of 


nu\\ _... 

package 

private 

protected 

publip :，， 

r&tufn 



catch' 

.■_ ■ _ ■ .. ■ 

exteruJs ,； 

'L；：;^vidt ； ； '：；' 

'-.^shditA" 

■_.■_• ■ ■ ■ P | ™ *fc B | . 

/ f 

chan' 

:、：：. false 

interface 二 

stalk: ^ ■ 'void:: 

m 


class " 

continue ： 

const :.:... 
debugger 
default 


.final 

finally L 
float 
■for : '' 
funct^iDn 


is 

• ：. ■ ■ ■ ■ 

long : - L 
namespace 
hative ：- 
new 


super . ,., 

switch — 

. ■ ■ ■ ■. 

synchronized 

this 

throw - .. 


volatile 
wh^s ■ : 
with 


r 


嘛 



廬:灌 _喊凌_來 


■ ■ ■ - . • ■- ■ f ■ • ■ - • 

■ ■■ ■ ,■■■••■-■■•_ ■■: 

tiieraiare up 

Dumb Qtfestjo^s 


碎： 如果我用一个保留字作为变置 
名的一部分呢？比方说，能不能把一 
个变命名为 ifOnly ( 也就是说，变量 
名中能不能包含保留字们 _? 

当拭可以， n 要保证不要与保 
留字完全 E 配就行.而 JL 最好编写清 
哳的 代码.所以一般不会用类似 el ze 
的名字 t 达可能会与 else 混清。 


im 


Java Script 区分大小写吗 t 換 


句话说 ， myvaH able 和 My Variable— 
样明？ 


知果你熟悉 HTML 标记，可能 
会习惯于不区分大小写的语言，毕竟, 
浏 I 器会〖可样看待<11£33>和< H H A D > * 
不过，对于 JavaSurijM 大小写是有影 
吟的 T my variable 和 My Variable 是两个 ■ 
不同的变量„ 


府 : 


我听说 JavaScript 任甸时候膝 
可以为变呈赋值（数字，串等） 。不 
过，如果我让两个变量相加，其中一 
个是数字，另一个是字符串_会发生 
什么呢？ 


I JavaScript 很聪明，它会尝武根 
据炕的需要转换类螌。例如，如果你 
将一个 争和一 个数字相加，/它就会把 
这个数字转换为一 个串， 然后将两个 
_联起来，有些情况下，这很不错， 
但还有一些情况下这可能并不是你想 
要的 a 先想一想，稍后就会计论这个 


问题, 


你现在的位 M > 
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命名变.黎 


Web 镇 指南： 更好的命名 


选择变童名时有很大的灵活性，所以我们想给你几个提示，以便你 
更容易地命名变量: 

选择有含义的名字。 



像一 m、r 和 foo 之类的变量名可能对你来说有某种含义，但是它们在 Web 镇中太泛 
滥了。你很可能过一段时间就会忘记它们原来的含义，不仅如此，如果用类似 
angle v currentPressure 和 passed 等名字，你的代码也会更可读 D 


创建多词变量名时使用 “camel case " 记法 e 

有时候你必须确定如何对一个表示复杂事物的变量命名，比如说，—个喷火的 
双头龙 4 怎么做呢？可以使用 camdcase 记法，也就是除了第一个单词外，将每 
个单词的首字母大写 ： twoHeadedDragonWithFire, Camel case 记法很容易使用， 
在 Web 镇中使用也很广泛，可以提供足够的灵活性,能根据你的 W 要来创建特定 

的变垦名。当然还有其他的方案，不过这种方法更为常用（甚至比 JavaScript 还 
流 行）。 

只有当有充分理由的情况下才使用以_和$开头的变置 & 

以 S 开头的变 M 通常是为 JavaScript 库保留的，另外有些程序员会由于一些约定使 
用以- 开头的变量，这些变童很少使用 t 建议你尽頜离它们远一点，除非你有非 
常充分的理由（如果确实有理由你肯定说得 出）。 

保证安全。 

对变量命名时要保证安全。本书后面我们还会给出几个保证安全的提示，不过， 
对现在来说，只需要记住命名要清楚，避开保留字，另外声明变量时一定要用 


var Q 
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JavaScript DOM 


f 装表达 

我们已经见过类似下面 的一些 JavaScript 语句： 

一个邊句 

scoops = scoops - 1; 

下面来更仔细地研究表达式，比如这个语句中的表达式 & 实际 
上， JavaScript 中表达式无处不在，所以一定要知道可以表达 
哪些内容，这很重要。下面给出几种情况 ■…-- 





可以鹐葛 gfj . 數字 
的表 H 式…… 

数值 表达式 

(9/5) * tempo + 32 



Math-randomt) * 10 

2.123 + 3.2 


tmc 或 fflLsc&ti 表 G 
式（达墊签然甚布汶 
表 ti 式） 《 


布尔 專达式 


2 > 3 

tempF < 75 

P«t == 


s t « rt Ti^ e 


nov 


level ^ 


的表达式。 



'"SUpQC 11 


碜表达式 

^cali^ 1 + y auKno^Th s t 




P _ innerurm . 


phoneNumber * substring(0 f 3> 


注意下面几页上的表达式（当然也要注意本书后面的部 
分），你会看到如何用这些表达式在代码中完成计算、 
重复多次执行 T 以及做出判断。 


这有另蚪一趕.吏智的表3 
式,輔涪鵷金介绍 。 



XM * 达式 

function () l \ 

gmtMlmnmn tBy 1A{ W pixikA’} 
n.«v Array tiO > 
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变里 



自我表达！ 

你已经看到 JavaScript 中可以使用不同类型的表 
达式，现在来具体运用这个知识，自己计算几 
个表达式。本章最后给出了 答案。 





V- c^rpen your pen 

根据你目前对 JavaScript 变里、表 
达式和 语句的 了解，看看你能不 
能找出以下哪些是合法的，而哪 
些可能导致一个错误。 


{9/5) * tempC + 32 
tempC 为10时结果是什么_? 


" Number ” + 11 " 4 - ，_2 ， T 

得到的串是什么？_ 

level >= 5 

level 为10时结果是什么？ 
如果 level 为 5 呢？ . _ 


color !=t > inkl _ ^■、钹子，【表承 U 

如果 color 是 "blue" 结果是什么？ __ 


(2 * Math.PI) * r 

如果 r 为 3 结果是什么? 



不是 ( d 神表 1 ^ / 


在下面的列表中，圈出合法的 
语句。 


var 

X = 

1136; 

var 

y = 

3/6; 

var 

s = 

"3W t ; 

IC = 

y; 


var 

n = 

3 - ” erne ”； 

var 

t = 

T, one ，r + ''two" 

var 

3po 

=true; 

var 

level_ = 11 ； 

var 

higfhNoon = f a,Xs0 ； 

var 

$ ^ 

21.30; 

var 

z = 

2000; 

var 

iaBig » y > 3 C; 


Z = X + 1； 

I ——; 

z y ; 

X — Z * tr 

while ( highNoon ) { 
z--; 

} 
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JavaScript DOM 



, 或者讲華 


■ 鱗 4 泉 I 


迅记得吧？我们说过 iaviiScripl 会 U： 编程变得很容易。其中 
-点就是它会负责根据需耍完成类型转换，來保 i 正表达式有 
意义。 

举例来说，假设你有下面这个表达式： 

message = 2 + 11 if by sea 11 ; 

我们知逍+可以用來完成数字相加， N 时它也是用来联接 
字符串的操作符。到底是哪一个呢？嗯， JavaScript 知道 
串“ if by sea" 肯定不会是一个数字，所以它认为这是一个 
字符串表达式，因此会把 2 转换为串 ， 变量 message 最 

后会赋为 "2 if by sea ". 

或者，如果有以下语句： 


value = 2 * 3.1; 


JavaScri pi 会把整数2转换为 一个抒 点数，所以最后结果是 
6,2* 

不过，可以 预见， I avaScripl 并不总能如你所愿^有些情况 
卜 - , 在转换方面它述需要一点帮助。稍后我们迅会讨论这个 
问题。 

—. •霪聆备^4 — -- 

JavaScript 计算下面的语句时会得到什么？ 

numORStringl = H 3 P, + M 4" 
nujnORString2 = P, 3 ,T * M 4 ,r 

为什么？ 
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JavaScript 选代 




while (juggling) { 


keepBallsInAir () 


} 


• * 


反反复 

如果一个 JavaScript 程序中所有工作都只做一次，这可能是一个很没意思 
的程序^很多事情都需要做多次。洗头发时，你要冲久 ■, 打洗发液,再重 
紅这个 过程， 直到头发 T 净为止 & 再比如开车，你要一莨开，直到到达目 
的地。或者你要4、断地用勺 S 出冰淇淋，直到佥部取光 D 为了处理这些情 
况， JauScdpt 提供了很多途径来循环执行代码块。 

可以使用 JavaScripi 的 while 循环不断地做某件亨， 直到 满足某个条件 

我们节一桡冰溲淋， f 泰还穷 



var scoops — 10; 



如畢 Atrui , 妖 I 金执 fT 石 ® 的代岛 □ 


下多子 D 勺，妹链铉漱达个代锃砝中的 


while (scoops > 0) { 

alsr-t{ r, More icacream? U J; 
scoops = scoops — 1; 




， 含接谢 ㈣ 冰浚淋 
」、.走 1 0 r 盘滅 1 。 


alertt^life without ice cream isr> p t the same"); 


条碑 ( sc ^^ > o ) ^ 的，轉坏结束,代辟链 

再始孰行迮摩的下一巧代 
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JavaScript; DOM 


所以如采考虑使用 while 循环，首先初 始化某个值， 比如剩余的冰淇淋勺 
数， while 循环会 对这个 值完成测试，如果为 true， 就执行一个代码块。 这个 
代码块将做一些工作，并且会在某 个时刻 更新条件测试中有关的值，使得条 
件失败，结束循环 d 




var scoops 


10 , 



while (scoops > 0) ^ 

alert( ri Hore icecr^asiP); 


条砷淛试 ATRMeH 执行代砝 


scoops = scoops « 1; 







aler-b("li£e without ice cream isn’t the 


择 ff， 条件 失蚊的链铽执 fj 下一 





JavaScript 还提供 f for 循环，使结构更为形式化。下面是用 for 循环编写的 
冰淇淋代码： 

E 07, 

初糾\ 減条件酿^ 


for (scoops — 10; scoops > 0; scoops—) 
alert {"There 1 s more ice craam! 





} 械坏条 4 失败的镊铉执 ㈠ 下 

alert( M Iife without ice cream isn't the sam 色 ” 条邊旬 . > 


09 

- - Dumb Questions —-- 

• while 和 for ® 环在我看来都一样 a 分别在什么时候使用呢？ 

—般未说,用 for 和 while 可以做同样的事倩 d 不过，从这个冰其淋例子可以看到， for 诚杯更为紧凑一些， 
不过你可能会认为 while 揭钚更可读。所以关键是哪一个最适合你的具体情况。通常， for 摘坏更习惯于对因定 
数目的值完成迭代 <比如，昀物车里的商 品}， 而 while 循坧更适合不断摘环直至满足某个条件（比如 I 为用户 

提供一个測睑，直至他做对为止） - 
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变置和迭代給习 






粉演浏览器 

运―页上的每—个 Jcj vaScripf 片旗 
酆 Jfe— 十单独的代碚戡^你的任旁 
龙伊淡濟 JE 榇，计箕奢个代碚旗 # 
聆奢有 兴痒弟的—十佝 
勰，井在代碚 T 亩® 
典你 的笮实 fl 


代码片 


段1 


黍泉 5 


var count = 0; 


奢任麒奋 



for (var i = 0; i < 5; i++) 
count = count + i ； 


代码 ft 段 2 


本章蕞肩含给 


alert ("count is ” - 
aUrtl f . 的閒 w# 基 I 士 


count) 


var tpps = 5; 
while (tops > 0) { 

for (var spins = 0; spins < spins++) 
alert("Top is spinning? 1 'J; 

> 

tops ~ tops - 1; 


汸含罨 f) 多少攻躂 if 

M r f f H 

T 吓 s 卩…叫叫！ 7 


代码 ft 段 3 


代码片段4 


for <var berries — S; berries > Oj berries ■- ) { 

alert {"Eating a berry H >; 

} 

硃唤 : J f 少军基 ？ 一 > 


fox (scoopa =0; scoops < 10; scoop++) { 
alert ( ir Thare T s more ice creaj^! n ); 

> 

alert ('"life without ice cream ian't the same 1 ，】 

俅 岣了 f 少匀冰涑淋 7 


48 第 2 荜 























JavaScript HDOM 



还可以把多个测试串在 一起： 

if (scoops < { 

alertt !, Ice cream is running low! 1 '); 
} else if (scoops > 9) { 


巧以榨狨莱屬 用 "cUitf 嫌加多个制 
基个 ^Lse if 都 fits 的和荚代鸪鲈， h 
扣在条_ 冷 tnao 4 W 含执个代轻块 。 


alert ( ?, Eat faster, the ice cr«am is going to melt! 11 ) 




两 JavaScript 傲判断 

我们已经在 f O r 和 wh i le 语句中使用一个布尔表达式作为条件测试， 
来确定是否继续循环 =■ JavaScript 中还可以用布尔表达式做出判断 0 

F 面给出一个例子： >F ... 

这灰我们的布汶表达式, 

一 f 看汪剩 下多少勺。 

如果.士咢弒执行 代砝 祕。 

C-* 


if (acaops < 3) { 

alert( r， Ice cream is running low! f, ); 
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JavaScript 务件 


垔多判断 


男外，增加一个“收窖葙 


§9 


还可以为 if 语句提供一个无所不包的“收容箱”。也就是最后一个 el3e , 所有 

其他条件都失败时就会运行这个 e 〗 se 代码块。下面再增加一些 if /dse ， 另外增加- 
个“收容箱”： 

S 意这 f 泶了碎赶. 只有法 




^cai 


if {scoops == 3) { 

alart( T, Ice cream is running low ，"）； 

} else if (scoops > 9} { 

alert(' Eat faster # the ice cre^jn is goin^r to melt* 11 ) 
} else if (scoops = 2 } { 



我们增 加了另外 一 些条件 
衡 It 到 ot ? n 


alert{ p, Going dnice f，，）.■ 

#lae if (scoops ~= 1) { 
alert(^Going twice 1 ,T ); 
els© if {scoops == 0) { 

*lert("Gone!"); 
else { 

alert {"Still lots of ic« crejun left, come and g«t it . IT ); 


^ 基哉 fH 的 “检 容箱' 如果丄 i ( I 条 





EmrciS « 


把上肘 的代码插入到下面的 while 循环中„跟踪执行 while 循环，按 
顺序写出得到的提醒 D 完成后可以查看本章最后给出的答案。 


var scoops ^ 10 ； 
while {acoops >= 0) 


(E S 接入 i 面的代接…… 


scoops = scoops — 1 ； 


alertriife without ice cream isn't the sama") 


把餘违写存 (if D / 
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代碚祓 w 


^avaScriptlGDOM 

挪 




一 


_ 


这个代码在拫醒中打 印了一 个著名的回文，问瓸是，有些代码写在冰箱磁贴上，可惜掉到 
地板上了。你的任务是把这些代码检起来放好，使这个回文代码能正常运行。要当心， 

上原来就 有一些 磁贴，它们不属于这个代码.另外有些磁贴可能要用好几次1学习后面的 
内容之前，可以检查本聿最后给出的答索^ 




var vordl = 
var word2 » 
var word3 - 
var word4 = 
var wordS = 

v&r phrase : 


p nam T, ; 

，nal p T, ; 
r l*n & c r， ; 
_a man a p' 



IP 11 . 


请扣反 —详的 
句今 t 如粟你把雄砧部汝的 1 含澧 
的後 I . 軚含着 f _) 这个©主> 


for (var i = 0; 
if {i 0) { 
phrase = 

> 

else If (i == 
phrase » 


X) 


wor dl4 ; 


) 


(i =- 2) { 


phrase -t wordl +■ wpr<!3; 


phrase ^ phr^a® 


trord2 + wordl; 


alert (phraae) 
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怎么把 JavaScript 放在页面中 


O 




♦往鄱承參 


嗯，问得好^首先，你需要知道一些基 
本知识。到目前为止，我们已经做了不少 
亊情：你知道了如何声明和使用 JavaScript 
变董，而且了解了如何构建基本的语句和 
表达式。你还知道如何使用所有这些利用 
if/else 语句编写条件代码，另外还会用 
while 和 for 语句完成迭代 工作。 

有了这些储备，现在我们来看怎么把 
JavaScript 放在页面中，更重要的是，要知 
道 JavaScript 如何与你的页面交互也就是 
说，如何确定页面中有些什么，如何改变 
页面，另外后面还会了解到如何对页面中 
发生的情况做出反应 & 


所以 1 尽管封 JavaScript 的介绍还没有结 
束，你也可以不用再等了现在就来看如 
何结合标记和 fr 为…… 


52 第 2 章 




Java Script 和 DOM 


在页 ® 中增加 JavaScript, 怎么加？在哪里加 ? 

要使用 JavaScript ， 肯定必须把它增加到一个 Web 页面中 D 不过在哪里加呢？另 
外怎么加？你已经知道有一个 < script > 元素，所以下面来看在哪里使用这个 
元素，另外它会如何影响页面中 JavaScript 的执行 s 向页面增加代码有 3 种不同 

方式： 


将走舞放旮 HTML 的 < htad > 
中. 认埽4页番加栽之镝执行。 



趄餘入到 web 
费 ® 中，或老也 

杉记 Ware 厲性 
幻用一个辈独的 

」扣 flScHptX _ c 


这句 I5U & 代砝 （ 或 
代砝的？ I 用）放旮 
体中。加栽体的就 
食机«这个代 


多数柙况下 1 代鹆 都含缯加刊否 
約都分 。 如聲将代场坩加朽体的 
%达金谜作砘稍穷拢科‘.不 ( 2 S 有 
说盒霣菜度洗化页®伐找 M 对充必 


f 这么破 ，: 


联机脚本放在 <head>S 素中。 

向页面增加代码时，最常用的方式就是 
在页面的 head 部分放置一个 <s crip t > 
元素。在< 116 茂< 1 >元素中增力 PJavaScript 
时，一旦浏览器开始解析 head 部分就会 
执行这个代码（这会最先执行），然后 
才解析页而的其余部分。 


通过引用一个单独的 JavaScript 文件来 
增加脚本6 

还可以链接到一个包含 JavaScript 代码的 
单独的文件 e 将这个文件的 URL 放在开 
始< 301 ：: 1911 >标记的 src 属性中，另外一 
定要用 </ script > 结束这个脚本元素^ 
如果链接到同一自录中的某个文件，可 
以只 使用该文件名（无需提供完整的路 


将代码增加到文档体中,可以作为内 
联代码，也可以作为一个单独文件的 
链接。 

或者，可以把代码直接放在 HTML 的体 
中 & 同样的，将 JavaScript 代码包围在 
< script > 元素中（或者在 src 厲性中 
引用一个单独的文件 ） 。浏览器解析体 
时就会执行页面体中的 JavaScript (而艮 
通常会从上向下执行 ）u 
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与页面交互 

JavaScript ^ 何鸟荧面交亙 

JavaScript 和 HTML 是完全不同的两个东西^ HTML 是标记，而 
JavaScriptJi 代码 A 所以怎么让 JavaScript 与页面中的标记交互呢？ 
答案是可以使用文档对象模型 (Document Object Model ) 










肀 身 

♦孜郸承令 



伢的釗篦芻 D 




在浏览器中加载一个页面时，浏览 
器会解析 HTML , 并创建文档的一 
个内部模型，其中包含 HTML 标记 


P .一麵 ...• 




JavaScript 修改了 DOM 时 
浏览器会动态更新页面，所 
以你会看到页面上的新内容。 



我 m 把忿葡稃蜉 


JavaScript 可以与 DOM 交 
互来访问元素以及元素 
中的内容 p JavaScript 还 
可以使用 DOM 来创建或 
删除元素（当然还可以 
做很多其他事情，后面 
会一一介绍> ^ 


=M 。 （I 術崎 ‘㈣ 
叼澉 f_J a 
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J a vaSol pt 和 DOM 


如何制作你 t B 的 ROM 

下面来看一些标记，并为它创建一个 DOM, 以下是一个简单的 
菜谱： 


配料 

—个格式正确的 HTML5 页面 
一个或多个 Web 浏览器 



做法 

1. 首先在最上面创建一个 document 节点. 



2. 接下来，取 HTML 页面的最顶层元素，在这里 
就是 < html > 元素，称之为当前元素，把它作为 
document 的子节点贈加到 DOM。 



3. 对于当前元素中嵌套的每一个元素，将该元素作为当 
前元素的子节点增加到 DOIVL 



</ p > 

</div> 

</body> 




4. 对子刚增加的各个元素，返回第3步，重复这个工 
作，直到处理完所有元素 . 


我 fllB 经妗择像了达 
个 翱 frl 5 — 箱" 
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介绍文档对象模型 


扣尝 ROM 

文档对象模型 （Document Ob〗ea Model) 的妙处在于：它能够在所有浏览 
器上提供一种一致的方式，通过代码访问 HTML 的结构和内容这一点太 
棒了 a 稍后就会看到这是如何做到的…… 


m 






敏 




挪 


杳 e 酈承參 



再回_我们的例子上来；如果按照创建 DOM 的菜谱，最后你会得到类似 
F 面的一个结构。每个 DOM 的最上面都有一个 document 对象，然后是一 
个包含分支和叶子节点的树，分别对应 HTML 标记中的各个元素 t 下面来 
仔细研究这个 DOM。 


裁们把这个铛构島栲相比玟. 
i 為 机料 f 硪蛾 
中的一个教搞鸽构。 





个⑽ M 。 L -- cuwent 


魷 一个軔 下在的 


W 的树棵 


I Html j 

■ J" 





这#軚係 4 树的分 A 。 


h ) 

f 


二 I I “le _ f^cript 

i '\ 


body I 


My Wog 

这#弑傳基树的吋子(闳」 
的奠中爯沒太棄，只有 
生本） 。 



My blog 


div id= ,F entryl H 

| 

1^1 

—i 

t— 

ii 



Greet Today I took a 

day bird I sow couple of 

watching three ■…“ photos — 


含甚汙 .糾奉之本内容> 不过这#内宕誧食存在） 。 















































Java Script 和 DOM 





你聆任旁朵爹妒麻逸萁 
你 t 驀 JMPHTJVOs 
护块 f： 拎 It 镲令芑妇 
D0^ # »_析本铯的 
HT ^ L f 在 r»r® 出 
DOJW . 找灼&餞«饰扞 
3个势. 


f 幻后®的内窖 t 系 L 锖 
村興本 S 最后给出的蚤索 
检螢俛诞得吋不 时。 


<f doctype html> 
<htmi lang= iT en f, > 
<head> 



Movie Showtlmes 

PImb 9 from Outer Spvce 

叫霈 ■ ^Wim. 7-mm. Sp«JMl '•tkmng 咖 _ 

Fnrbtddeii Planri 

^1«| it ’OCjpfii, SUOpn. 

WnHHHHmHHnHMl 


<t itle>Movie s< / title> 

</h«aci> 

<body> 

<hl>Movie Showtim«s</hl> 

<h2 id= M nioviel T _ >Plan 9 from Outer Space</h2> 
<p>Playing at 3:00paa, 7:00pm* 

<span> 

Special showing tonight, at <ein>!iiidnight</*m>! 
</»pan> 

</p> 

<h2 id—°movie2 11 >Forbiddan Planet</h2 > 

<p>Playing at 5;00pm r 9:00pm.</p> 

</body> 

</html> 



你现在的位置 ► 


57 


















JavaScn pt 与 dcim 的关系 

七 ♦ 

♦任 齟承參 




龟 i 







也可以这么说，这两个完全不同的技术如何关 
联 。 

HTML 和抬 vaScript 完全来自不同的星球 & 为什么这么 
讲呢？ HTML 的 DNA 由描述性标记构成，允许你描述构 
成页面的一组嵌套元素。另_方面， JavaScript 却是由 
纯算法性的基因物质构成的，主要用来描述计算。 


既然它们有着天壤之别，是不是根本无法交流呢？ 
当然不是，因为它们还是有共同之处： D 0 M o 通过 
DOM , JavaScript 就能与页面通信，反之亦然，完成这 
种通信有很多不同方式，不过现在我们只关心其中的 
一种 a 这就像一个小通道，允许 JavaScript 访问任何元 
素，这个方法称为 getElementByldfl 

下面来看它如何工作— 
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Java Script 和 DOM 




先从 DOM 开始。 下面是一个简单的 DOM 。 这里有几个 HTML 段落，每个段落分别有一 
个 id , 分别标识它是绿星球、红星球还是蓝星球。每个段落还分别有一些文本。当然这 
里还有一个 < head > 元素，不过，为简单起见，这里省略了有关细节。 




下面使用 JavaScript 做些更有意思的事情。 假设我们想把 greenplanet 的文本 
从 “All is well ” 改为 “Red Alert : hit by phaser fire !” 。以后你可能还希望根据用户的动 
作（或者甚至根据来自一个 Web 服务的数据）做这样的工作 a 不过这在后面再做讨论， 
现在只是直接更新 greenplanet 的文本 。 为此，我们需要得到 id 为 greenplanet 的元素。 
相应的代码 如下： 


爱记 fj 表寺列览器中 

的#个否衙. 

辦以芍 W 让它鈒任仞寧傾，此如奮 
找眘一个神宠 W 的无蚩》 




( A 莖龙求奩我鸟相定 W SB 
的 无砉， a 畀妗我们鍉供一个元鴦^ 



docmnent.getEIementById( n greenplanet") ; 



左 , f 0 r « wpl ^ t ^ t r ， 6段落无豫…… 
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使用 getelemerttbyid 




—旦 ge 旧 ementByld 提供了一个元素，就可以用它来做些处理（比如 

把它的文本改为 "Red Alert : hit by phaser fire " ) e 为此，我们通常会把元素赋 
至一个变量，以便在代码中引用这个元素下面就这样做，然后修改文本： 





将光素醭 g _ 个名 
'3： ^ 


3罢4 g tt ^ ^ it ^ B 倉戟 

t d 4達函2个尤竞、 


var planet = docmnant , getElementByld ("greenplanet 11 }; 

i 

在代砝中， 现旮 a 们巧 w 迫讀值 
用4 § f 3 Lfl*wt 柬 g | 用送个犬砉 u 



planet , innerHTML = ” Red Alert : hit by 


y 

f 的力 t . 


将 greewf > Mt .: 元 f 的内窖汝 
妗这个扣丈本 … (A 含 S 政 
( iy ■及迈承）珥到绠 
^ 梦涵#3个 軒丈枣 


稅后还金勿论走 
i 的爆找…… 


phaser 


fire ! 11 ; 



时 I30M 的 f 4 叼竹磕軒含廷器 f 现的 否乐中 
,6 frU 0^41 ) 这个猱接欢婷电含新的由容5 
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JavaScript DOM 


Jf^rpen your pencil 



下面是一个 DOM , 其中藏着一个秘 
密消息。计算下面的代码，找出这 
个秘密！答案倒放在这一页最下面< 


docuaient , getElementById("e7 1 ') 
document. getElemen tEy Id { T, e 8 
document. getE lemen'tByld (" el6' r ) 
do cumenlu T ge tEleme ntByXd (”e 9 ） 
dociament. getElementById( T, elB ,t ) 
document ■ getE le men-tByld ( M el 3 M ) 
document+tElemeivtByld ( ,T el2 ,T ) 
dacumen t. ge tEleme ntBy Id (' 'e2 T, ) 

个太泰的内 t # 出秘密 


U 



w 


e L 

CM 

■ 

II 

Tj 1 



公 

e 




2 厂 E 




—| 











% 


i 


n&A 




US 
iL:. 



ii 

D 


=t i 

I 




-nap 苦 a 


:.1 ^ILH^ 

rr~LB?=p!n 尊 ^ l-p=p!ji 零 Is 

. _ _ 

H _ 


h，=p! H 


言 一 


s 


+-DU 





qnMrn■p r5J go i:lvl■ 


^p'l.p! § 


40a 


-gl 




Eu 


一 . 1 ! >lpf 


aJEp. 







•’p‘-=pi 1 

- 
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测试 dom 代码 

删试1球 

i 

你已经了解如何使用 document-getElementByld 来访问一个元素, 
也知道了如何使用 inner HTML 改变这个元素的内容 D 下 面来具体做这 
个工作，没错，就是现在„ 

以 F 给出星球的 HTML 。 head 部分有一个 < script > 元桌，我们将在这 
里放人代码，另外体中包括 3 个段落，分别对应绿星球、江星球和蓝星 
球。如果还没有准备好，卜面输人 HTML 以及更新 DOM 的 JavaScript: 



<?dpctyp« html> 
<html lang="«u ,t > 


<head> 

<title>Planeta</t ； itlQ> 

<meta charset^" utf- 8 T, > 

<nOrT±pt> 

var planet = document.g9t£lementById{ 11 greenplanat M >; 
planet, inner HTML = M Rad Al«rt ■: hit by phaser fire! ，T ; 
</script> 


宥的 head 郝分 


/ 軚律前® 赛到 的， Cdf 
^___^ #政変它的内 § D 


</head> 


<body> 


<hl>Gr«en Planet</hl> 

<p id= ,t greanpl«n«t lt >All is %f8ll</p> 
<hl>R«d Planet</hl> 



运抚！！用 javaS&rljitfrf 致 


<p id="redplanet T, >Nothiag to report</p> 
<hl>BluQ Pl«jiot</hl> 

<p id= M blueplano^t^>A11 systems A-OK</p> 
</body> 

</htnOL> 


输人 HTML 和代码之后，再在浏览器中加载这个页面, 
看看绿星球上发生的 DOM 魔法 D 


嘁吻！笮闷蛀「绿1球04$ 
^ *AtL U welL " * 怎么® 事？ 








G # . lacaJHiOH • ， St-t+i HTML 


c^_VV 


Green Planet 


All is well 

Red Planet 

Nfflhing io report 

Blue Planet 


AJI systems A-OK 



62 第 2 章 









JavaScript 和 DOM 



0 


O 




噢，对了，忘了告 诉你一 件事。 

大多数怙况下，页面完全加载之后再执行 JavaScript 代 
码是有道理的 。 为什么呢？ 嗯， 如果不想等到页面完全 
加载，那么代码执行时 DOM 还没有完全创建呢！在这 
里，： TavaScript 会在浏览器第一次加载页面的 head 部分并 H 
在加载豇面其余部分之前执行，所以 DOM 还没有完全创建。 
而目_，如果 DOM 没有创建， <p id="greenplanef，> 元素 

就根本不存在！ 

那么究发生了什么？代码想得到 id 为 greenplanet 的元 
桌，但是这个调用没有返回任何结果，因为并没有匹配的 
元素，所以浏览器会在代码运行之后继续呈现页面，因此 * 
你确实会看到呈现的页面，但是代码并未改变绿星球中的文 


本 0 


我们需要一种方法告诉浏览器“完全加载页面并创建 DOM 
之后再运行我的代码”。下面来看如何做到 * 


你现在的位赀 > 63 


等待兔面加敕 

哀齑完金加栽之前不 荽打扰 POM 

但是如何告诉浏览器只在页面加载之后才执行代码呢？ 

要告诉浏览器执行代码之前需要等待，我们要用到两部分 JavaScript , 之前 
你可能见得 不多： 一个是 window 对象，另外还有一 个函数 。 后面还会详 
细讨论这两个内容，不过现在先直接使用，让代码能正常工作。 

将 JavaScript 代码更新如下： 








<acript> 



笔先 初 違 一 个名笱 Ult 的矗盘 r 把规奄的代铎致 
个函 數中。 


function init() { ^- 



ii 金饬的代砝故个孖 
姑{和一个鍤 = 


var planet ® document, g«tElera6ntBYld( ,, greenplanet ,f ); 
planet.innerHTML = "Red Alert: hit by phaser fire!”; 




££ W 将 v/L^dowj^ioadM fi 的 (i 

window.onload = init; 设 1 笱这个凾數名： 

</&aript> 

这表孕 . 否®宪 f 如载的屢 
执行中的代砝， 


重新加敎荧 ® " 


再来貢新加载页面，看看做对了没有。 


» ^ ^ Placets 



对现在可以卷约锞1_<》>元 
秦中的由内容。是不基很棬？ 


噁. 真正樣的 t 规杏伪知 (I T 釦闲 
苦诂到锘器注朽这问； t f 的代 mz 场 
光龙 等轉 PDM 宪全加栽 3 
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JavaScript ： DOM 


Sharpen your pencil_ 


g 下甚 ii 个班® 

<! doctype htuxl> 的 h+TML 。 

<html lang= f, en pt > 

< h « ad > 


以下是一个歌曲播放列表的 HTML , 只不过这个列表为 
空《你的任务是完成下面的 JavaScript . 向这个列表增 
加歌曲。用合适的 JavaScript 填空。学习后面的内容之 
前，先对照本章最后给出的答案检查你做得对不对 u 


Playliat</title> 


<meta charset= ,T utf- 8 T, > 
<script> 


我们的脚车。 
的 it®?) 表。 


达个代砝 t 试光下蒞中 


addSongs {) { 


var songl - 

= docuinent « ( " 

T， ) ； 

Vir = 

= V f 

”； 

var = 

= getElemeivtByldM" 

M )； 


^ 成入砝少的代踢 ,柒鹐充旙被列表 ^ 


song3 , 


* iimerHTftnj = "Blue SuedA Springs, by Elvis Pagely ,T ; 

_ = M Great Objects on Fire, by Jerry JSON Levis 

_ « "I Code th« Line r by Johnny JavaScript"; 


window._ ; _ 

</acript> 

</head> 

<body> 

<hl>My Mweaome pi 在 


<ul id=,rplaylist，,> 这甚空的歉 _ 表， 

<li id^30ngl”x/li> 糾表中的各个坩加内容母 

<li id= ,, gong2"X/li> 


<li xd='^onqT'X/li> 
<Ail> 


</body> 

</html> 


如革能 i £ 常 ii f > 

行,加教资®后 含礞利 
类似运#的 ft 果。 




. *> 

My awesome playlist 

• 严 w. Subtle S?nn^j. by Etvis Psg^Jy 

• on Fmf, b>- Jot> ISGN t« w ls 

_ \ OKfc dM ： Lmc. by lotDny j avlScript 


■ 


你现在的位置 ► 


65 









































更多 DOM 功能 


那么， POM 还能傲什么？ 

DOM 能做的远不只是我们目前为止所看到的，在这本书中，我们还会 
用到它的很多其他功能，不过对于现在来说，先简单了解-下，让你 
有些初步的 印象： 



杳拽斿获馭 DOM 
中的一个威多个 


I 




初遘新; fc 




o 



■ ”… 进过 M 縣 I 1 ) 

W 中的另一个光 
景，命增加 
疋棄 * 


ibi ■ ■ -i-ihS ■-•^1 I 11^ ■ 噌 ar/iii^s 丨 ■<•>(> 

" 》 I 「I 


从 DOM 得到元素。 

你舀然8錢知進这一旦， ©* 我们 一 S 在用 
documeHtuefEknieiit^ki ■ 不过还布其他方法 
来得到无*。实标土，你玎敁 tfffl # 钯名，类 
名和展桟來®取不 H ■'个元*,布4餐个_扭 
无* (tt 釦类 " oii ^ aU " 中的所布无 *) a 还 
玎认#到用户输入的表輩值，知一个嫌 A 无棄 
的殳本。 


向 DOM 创建或增加元素。 

荈敁釗建新无 *, 还玎从坨这些无* 壜加利 
POM . 盎然， 对 POM 箝做的任何搀改都会在 
浏 KS 呆现 PGMH 女即痘蛾出来（这蛊一件好 


M 除现有 
的免砉。 




m 


从 DOM 删除元素。 

连玎吆从 P 0 M 删躲无棄，个父无棄， 
删除它的某个孑 x * a 重申一决， 一 S 无素从 
扣 M 蒯除.你就会在洌览鼉窗 o 中着到 ee 被 

naj, && 

W? P3p o 


味兄残射逢一 
个走 f 的屏 ft, 
■iutd s^ctnsi P 



获取和设置元素的属性。 

到 ©«* 止.你只是钫问3 xt 的文本沟窖, 
实标上还可认钫闲厲性 a 俐如，你可能猓知绝 
-个 x 素的类是 什么， 然后动0摊改变 窃所雇 
的类。 
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JavaScript 和 DOM 


能不能爯谈谈 JavaScript ? 或者》能不 
能告诉義 JavaScript 中如何存储多个值？ 

你已经对 JavaScript 和 DOM 有了一定的了解，可以放松放松，休息一下了，不过在 
此之前，还想 W 告诉你另外一个 JavaScript 类型，以后你会大量使用这个类型 
Array, 假设你想存储32个冰淇淋口味的名字，或者想存储用户购物车中所有商品的 
数量，也可能想存储每个小时的室外温度。如果 用变置 来存储，很快就会变得相当 
麻烦，特别是如果需要存储数十个、数百个或者成千上万个值时。幸运的是^我们 



可以 i t A rray 来帮忙^ 


&通包當_个缶璩含。 




刃以枨昶來屦命數组 
嫌加 I 多的值, 


S 个 (6 有一个索？ | 畢. 





的子数邊中的茬个素幻 ■ 
邻. 节一个牦应的 d 


如何创建数纽 

使用数组之前首先需要创建 * 而 n 需要把数组本身赋至一个变置，以便 
在代码中 引用。 下面创建以上这个数组，其中包含每个小时的温度： 


这基侈存數祖 






…… 4这 I 屑体釗 
建一个錡的空廬迅 


var tempByHour = new Array ()； 


terapByHour [0] = 59.2; 
tempByHour [1] = 60.1, 
tempBy Hour [2 】 =63; 
teropByHour[3] = 65; 
tempByHour [4] = 62; 

索亏 k 


^1-/ 


i 4* S 金異乘介绍这个读法.不 ㈡ 的现奋来 
作，只知( I 它金4_)4—个鰣盘纽。 



冬 ~ ■ 


f 龟教通坩如新( 3 £,只用數硪 
太*的索？)咢,科雅定一个 0 L 

，类似 -Jjfivflstript 中的 .4 # , pf V / ^6 — 个數组 
索？1■斌 f 4 问免（或老仔闷化类奄）。 


或者，如果你确实很忙， JavaScript 还提供了一个快捷方式，可以输人- 
个数组（我们称之为“字面量数组 M ) ，同时完成创建和初始化： 



(i 办含釗 ® 同样的 蛊闼， fsft 

var tempByHour — [59\2, 60 63, 65/ 62]; 辟少 多。 
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使用数组 

向数组增加另_ 令无索 

任何时刻都可以不断向数组增加新元素，只需使用下一个未用的索引， 
如下所示： 




龟 i 


« r : 
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使闲数 组元素 

要得到一个数组元泰的值，只需引用数组变量并提供一个索引，如下 
所示： 



var message = ” The temperature at 5 was " + tempByHour[5]; 


alert (message )'； 


愛动闳棄 $ 的溻度^ F , f 
用这个數纽斿指 4 索斟 & 


3 鞟数餓大小或其他 

只需引用数组的一个属性 length , 就能很容易地得到数组的 大小： 

下一耷会 t 深入地於属忖„规存只龙知违 
var munltems = tempByBour.length; 备个數有这个 LeiA^th. 數组，巧 W 苦诉你 

數组中的无寿个數。 

既然我们知道了如何得到一个数组的大小，下面来看能不能把你 
掌提的循环知识与数组结合起来…■-- 
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JavaScript DOM 


parpen your pencil 

胃 度 。我们已 


页面中包含一个列表，其中元素为空，等着你用 JavaScript 填入温 
我们已经给出了大部分代码。你的任务是完成这个代码，使它将各个列 
表项的内容设置为数组中相应的温度（例如 ， id = " tempo " 的列表项会得 
到数组中索引为0的温度，依此类推）。所以 ， id = “ temp 3 rt 的列表项会读 
做 “The temperature at 3 was 65”》如果想加分，看看你能不能想办法得到 
索引为0的温度，但是读做 H noon tt 而不是0。 


<『 doctype html> 

<html lang ^” en IT > 

在 d> 

<ti tie >T©mperatu rea</ tit le> 
<meta charset= T, utf-8' f > 
<script> 

function ahowTemps () { 






var tiempByHour = 

=new 

m 

f 


^ezapByHour[0]= 

59,2; 



tempByHour [1}= 

60.1; 



tempByliou r [ 2 ] — 

63; 



tempByHour [3}= 

S5; 



tempByHou r [4]= 

€2; 



for (var i = 0; 

i < 


r 

var theTemp 


DU; 


var id = ,f 

M 

r + i; 


var li — document. 


(id>; 

if ti == 

)i 



li. 


- T， The temperature 



莩鵄含饨坏和数组。铯要 
达耒喏？族们存锾用一个芍 i 的 
索来访间數逆中的各个元黃。 


theTemp ; 


else ( 

li, InnQrHTML 


'The temperature at 


was 


+ 


window, onload = ahowTentp s j 

</script> 

</head> 

<bady> 

<h1>Temperatures</hl> 

<ul> 

<li id- T, tempO' f X/l i > 

<li id= T, tempi" x / 1 i > 
<li id— T, ten^2' T X/li> 
<li id= M temp3 < T x/1 i > 
<li id= 1, temp4 , X/Ii> 
</ul> 

</body> 



■：； » 


ir 爺的代砝含把一个 
g 含濩 皂的 短诘缜入 
备个利表筠 


Temperatures 

* ^ «ejTrpefam re a[ n _ 

* The tcmpcrafure 利 1 wasjSt}, I 

* ^ tempcnittm ； m 2 was m 

* Tllc tmpcraiUR： aj 3 h-as 65 

* The lempeniunr &i A was 61 


59.a 
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pfifase-o-matfCi^-f 





资昜 个 # D 的 的 Phras 卜 0- MatU 在用的 
代踢- 卷卷餘不钺 搞潢 楚它的 0 用 …… 


<!doctype html> 
<htrol lang- ,T en' T > 
<head> 


<title>Phrase-o-matic</titl&> 
<meta charset =,t utf-8 '> 

<style> 
body { 


你觉得第 1 章中的 JE 式商业应用还不 
算正式，是吧？那好，如果你想展现 
你的才能，可以试试这一个。 


font-family: Verdana f Helvetica, sans-serif; 


</style> 

<script> 

function makeFhrase9 Q { 

var words 1 = [ T, 24/7 u f ^nmlti-Tier'% M 30 r 000 foot", T 'B~to^B'\ "vin-win"]; 
var woxd^2 = ["empowered 11 , "value-added” ， "oriented ，、 n foeused'% "aligned”]; 
var words3 = ["process", "solution”, T, tipping-point* 1 f "strategy' M viaioi> ,T ]; 

var randl — Math, floor (Math, random Q * vordsl. length); 

var rand2 = Hath. floor (Hath. random Q * words2 * lefjgthJ; 

var rand3 = Math* floor (Math. randona Q * words 3. length); 

var phrase = wordsl[randXJ + " + words2 [rand2] + M T, + wox ： ds3[rand3J; 

var phraseElament = doeuntenii. get:ElQmen,'tBYld{ "phrase IT ); 
phraseElement.innerHTML - phrase- 

} 

window, onload = makeFhxases; 

</acript> 

</head> 

<body> 

<hl>Phrase-o-Matlc saya ： </hl> 

<p i d= "■ phrase ,T >< /p> 

</body> 

</html> 
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Fhrasc-O-Matic 

我们希望你会发现这个代码是一个理想的工 凡， 可以 
帮助你创建 f —个热门的启动项目标语。过去，它 
曾经创建过一些成功的项目口号，比如“双嬴增值方 
案”和 “24/7助力过程”， rfS 且我们深信将来它还能 
用来创建吏多漂亮的口号。下面来看具体是如何做 
的： 


H I ^ 

JavaScript ! DOM 


n 



( J ) 首先，定义 makePHrases 函数，页面完全加载后运行这个函数，这样我们就 
能知道可以安全地访问 DOM : 

定义一个名治 rases 的函數 1 以后余 il . 用 d 
/-个函數。 


function makeFhrases () { 

-HAafeiPhr 肛 es 的辦节代接郯趣存这 f , 相.后粢分 
料 …… 

window , onload = makePhrases ; 亡 ― S 普 —S 七'我 h 教.故 i 8 

m^feePh rases,. 



@ 有了以上的基础，下面可以编写 makePhrases 函数的代码了 ^皆先建立3个数组，分 
别包含用来创建短语的单词。我们将使用快捷方式来创建这些 数组： 


舍)連一个名的変 I f 用泉用¥ 


ii 个 麓组。 

var words! = ["24/7' ^multi-Tier", 


,T 30,000 foot", 




pl win-wifi ,T ]; 


\ ： - 4 这个數租中放入 5 个令得寧，完全芍 

乂一一 以把 它们 减威劣韵聂訥的流> 

var words 2 = ["empowered" 1 , "value-added 1 、 "'oriented^r ” focused’% ’■aligned’ 1 ]; 
抑丈 words3 = ["process", T, solution ,t / ^tipping-point 1 ', ” strategy”, tf visxon H ]; 


这 4 另外荈个荤碑蛊述 ， 分糾瞰 E 茶 
个新变 I ， word ^^ wor^s 5 


你现在的位簋 ► 
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phra se - Q-matic 如何 


@ 好了，我们巳经有了 3 个新数组存放鮏新的流行语 s 现在要做的是随机地从各个 
数组中选择一个单词，然后把它们放在一起创建一个短语 

如 F 从各个数组中选择一 个单词 ： 


var 

var 

var 


一 我们為备个數组分别釗澧一个琏机装，将它噥呈一个斜变§ 
(rflv^i, r&vu 拉和 c 

randl — Math .floor (Math. random (} * words I, length); 
rand2 - Math. floor (Math. random (} * words2. length); 


rand3 - Math, floor {Math. * wordaS, length)? 



这个代 4 舍榷邛各个盘迮中的走漦 个數生焱一个哂机數(在 i^W 泉5个元索 
完全芍以命 .& 锘坩加更多无 rtii - 蟬秸 it 業1作） u 








m 




@现在把各个随机选择的单词连接在一起 s 毎个单词之间有一个空格来保证可读 
性，这样就能创建引人注目的宣传语 6 


用另外_个变雀保存这个短洁 



使用备个缒机数作遶聲 
碑蛊砠的旁？ I …… 


var phrase = wprdsl[rar\dl] + 


fl " 


+ words2[rand2] + 



worda3 [:and3] ; 


( 5 ) 差不多了，现在有 r 短语，只需要把它显示出来。你现在应该已经知道该 
怎么做了：我们要使用 get Element Byld 找到段落元素，然后使用元素的 
innerHTML 放人这个新短语。 

:>4 ‘■■ phrase ” ^< p > 无寿 

var phraseElement = document. getElement.BYXd{ "phrase 11 ); 
phtaseElement.innerHTML - phra$«; 

»v 然后把 < p > 尤景的内 
容沒 i 七 a 个短读 s 
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JavaScript DOW 


@ 奸 了， 完成最后一行代码，再整体检査一遍，在浏览器中加载 
这个苽面之前，先享受享受成就感 s 测试一下，欣赏得到的宣 
传语吧 D 


达鲞簌们卷时的 


rs ^ PhriJ*-e-mit h c __ 

f 嶠卜 [\ + ■ - : - j X 、 ， I ， ■ - ^:^ rst-HTMt i» : thip-ei 1 1 prtrase.htn 


Phrase-o-Matic says: 

6- to-B focused V'Sion 


ywiiniiWHfWir _ iin r , 

4 

只電重弟加戲贡®, 拔秕专科乇穷毛尽的 急砝场 Q G 
L 寻（嘌. 也许不轰先矣无尽， 不过暫 n 久与釦杜咆:. 
我们 S 会 fi ： 这个阇輩 的代砝 4珥逢合人托40 f 


问 


问 


到底什么是 Math, 另外 Math- 
random 和 Math/floor 做什 么用？ 

答: Math 是一个内置的， 
包含一大堆与故学相关的函彩 U Malh , 
random 会生成0到〖之间的一个随机 
数，我们将这个随机数来以数组中的 
元素个数（使用軚组的 length 属性得 
到），可以得到介于0到数组长度之间 
的一个軚。这个结果很可能是一个浮 
点致，比如 3. 2,所以我们使用了 Math , 
floor , 来确保得到一个埜数，可以把 
这个埜数用敗敦组的索来选择隨 
机的单词 a Math , flour 所做的就是去除 
一个浮点数中小数魚后面的数字，例 
如， Math 」 floor (3,2) 就是 

A :在哪里可以找到有关 Math 之类 
的文档呢？ 


there i^e no o 

Dumb Questions 

考 资料: O’Reilly 出版 David Flanagan 
所著的 《 JavaScript: The Definitive 
Guide》 e 


之前你说过可以在变里中存储 
基本类型（如数字、串和布尔 值）， 
也可以存储对象。不过我们现在是在 
变置中存储数组 。 那么数组到底是一 
个基本类型还是一个对象呢？ 

答： 问得好！数组是 JavaScript 内置 
的一种特殊类型的对 象 51 之所以说它 
特殊，这是因为你可以使用軚值索 
访问数组中存储的值，这是用其他 
(非数组）对象或者你自已创建的对象 
做不到的，第4章会介绍如何创建你自 
己的对象。 


* 关于 JavaScript 有一个很好的参 


* 如果我试图访问_个不存 
在的数组索引会怎么样呢？比如 
说 ， my Words 中存储了 5个单词，但 


我想访问 myWords 【10]。 

* 你会得到 undefined »如果逐记 
得，这是一个尚未賦值的变量的俵。 

问： 能从 Array 删除一个元素吗？如 
果能，其他元素的索引会有什么变化？ 

答： 当战可以从 Array 刑除一个元素， 
而1有两种不同的方法来删除。可以 
将该索 fl 的数组元素值设置为 milL 例 
如， tnyAnay [2] = imlU 不过 * 这意味着 
Array 的长度保持不变。或者还可以完全 
刪除这个元素（使用禹数 sp ! ice > s 在 
这种情况下,所刪除尤素后面的所 
有元素的索引都减 U 所以，如果 
my Array [2 1 = “ dog” ， my Array [3]= 
“ cat ", 而你刪阶了 " dog " 、那么就 
会有 my Array [.2] = ' cal " > 而且紋组 
的长度比原来少1。 


你现在的位 M * 
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学种语 t 蛊一令 碓巨的工作，不仅栗求 
你孖动大胎，逢 t 麥让 大胎埵咨鷇松 a 箝吆孪 
完达 一 f 么后，我们*荽体息 S 轻 
松轻柁， 不过在 iti 前，先金 潘后* 的要点， 
#完成饿字游戏， 真疋拕 达些沟容牢牢纪住。 


0 






戧们还 不知违 怎么来 
梯 MH 滅, 所以氐奄 
龙 fSt 射舣誓 .『 
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BULUT POINTS 

r 


使用 var 声明一个 JavaScript 变虽 ^ 
数字、布尔值和串是基本类型。 
布尔值为 true 和 false 。 

数字可以是整数或浮点数 D 


未赋值的变量值为 undefined 。 

undefined 和 nuH 是两个不同的 
值。 undefined 表示一个变量未赋 
值 t null 表示这个变量有一个空值。 

数值表达式、布尔表达式和串表达式会 
分别得到一个数1布尔值或串值。 

要重复执行代码块，可以使用 for 或 while 
循环。 

for 循环和 while 循环可以做同样的事情， 
要根据具体情况使用最适合的形式$ 

要结束一个 for 或 white 循环，某个时刻条 
件测试必须为 false 。 

可以使用取 else 语句根据一个条忤测试 
做出判断。 

条件测试是布尔表 达式。 

可以向 Web 页面的 head 部分或体部分增 
加 JavaScript , 或者把它放在单独的文件 
中，并从 Web 页面链接这个 文件。 


■ 要用 <script> 元素包围你的 JavaScript 代 
码（或指向代码的链接 ） a 

■ 浏览器加载一个 Web 页面时，它会创建 
一个文档对象模型 (DocumentObject 
Model , DOM ), 这是 Web 页面的一个 
内部表。 





JavaScript DOM 





通过使用 JavaScript 检查和修改 DOM ，可 
以使你的 Web 页面有交互性 a 



可以使用 document+getElementByld 访问 
页面中的一个元素 D 

document.getElementBy Id 使用一个元素 
的 id 在 DOM 中查找元素 

可以使用一个元素的 innerHTML 属性修 
改这个元素的内容。 

如果你想在页面完全加载之前访问或修 
改元素，会得到一个」 avaScript 错误，你 
的代码将不能正常工作。 

将一个国数赋至 window,onload 属性，可 
以在浏览器完成页面加载之后运行这个 
函数中的代码。 

可以使用一个数组来存储多个值 p 

要访问一个数组中的一个值，需要使用 
索引，素引是一个整数，指定数组中元 
素的位罝(从0开始 ） D 

数组的 length 属性会告诉你数组中有多 
少个元素， 

通过结合循环和数组 * 可以按顺序访问 
一个数组中的各个元素。 

Math 是一个 JavaScript 库，包含大量与数 
学相关的函数。 

Math , random 会返回一个介于0和1的浮 
点数（但是不会为 1) 。 

Math.floor 把一个浮点数小数点后面的所 
有位去除，将它转换为一个整数。 
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填字游戏练习 


镇字游珙 

下面用一个填字游戏让你的左右脑都动一动^玩得幵心! 


、任郵承參 # 



横向 


2, 5 < 10是一个__表达式。 

7. 可以将 JavaScript 增加到1^了艄1_的_ 


体 6 

8 . _ _ 

1 变垦以 


是 DOM 树的根。 
$或_开头。 


10. DOM 是^_的内部表示 a 

11. 使用一个__从数组得到一个值。 

12■要选择有意义的名字，对长名要使用_ 
case 记法口 


部分或 


13■如果写为3+ “Stooges” ， JavaScript 会把3 
__为一个串。 

15. 将所有冰淇淋口味都保存在一个_中^ 

16. 可以用一个___循环反复做事情。 

1入检查_就能知道一个数组中有多少个元素。 

18. 通过 document. _可以用 JavaScript 从 

文档中得到一个元素 


纵向 

Vwhile 和 for 循环使用一个__表达式作为条 

件测试。 

3. 浏览器加载一个页面时会构建一个文档_ 

成器选择的星球 id。 

5^增加_可以使 Web 页面有交互性 g 

6,如果 JavaScript 在一个 HTML 觅面中，要用一个 

<_>标记包围 JavaScript 代码。 

14 ■如果快结束了，则可以喝喝茶，_没有结 

束,那就继续工作！ 

19,页面完全加载之前不要打扰__ 
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Saiutio 


自我表达！ 

你已经看到」 avaScript 中可以使用不同类 
型的表达式。现在来具体运用这个知识， 
自己计算几个表达式9下面是我们的答 
案 1 o 


(9 / S ) * tempC + 32 
tempC 为 10 时结果是什么？ 


50 


■Number 1 ■ 


,f 2 


fl 


得到的串是什么？ 


Nam 6 e ^ 2 


level >« 5 
levd 为10时结果是什么？ 
如果 level 为5呢？._ 


tme 


ttue 


> = 及 「 < 子或 


color T, pink 11 

如果 color 是 “ blue ” 结果是什么？ t，lU£ 


color 不筹 


(2 * Math.PI) * T 

如果 r 为 3 结果是什么？ f8 84 


itU 


在接知遷,祐杲 3.14. j 



不襄 a 特表达 


! a vaS C ,pt DOM 



角 parpen your pencil — 
# Solution 


根据你目前对 JavaScript 变量.表 
达式和语句的了解，看看你能不 
能找出以下嘟些是合法的，而哪 
些可能导致一个错误。 

在下面的列表中，圈出合法的语 
句。 





one . 


理论 i ： 舛，合法杓■不 
a 金得 m — 个伪乇彳 n 用 
的值. 

^var t = "one" 4 - fl two^ 
var 3 po = true ; -不會:在 



level — := 国 1^} 

^var highNoon — falgg ^ 



你现在的位 i > 
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练习 



粉演浏览器荅索 

运—瓦上的每片敌 
鄴; fe — 十单狼的代碚啟。你的任旁 
*伊求匆 3 E 縣，计箕奢个代格旗， 
咳者有兴錄并的—个尙 
瘅，并在代碚 r 丧 S 
出你的 苹溧。 




u 6 





代码片段2 


代码歐〜颶淤 

var count = 0; 

for (var i = 0; i < 5; i++) { 

count - count + i; 

} 

alert ("count ig " i 

aLert E 条的 acut^t 晷多少 r 

^ fO 


count )； 


var tops = 5; 

while (tops > 0) { ^-— 

for (var spins = 0; spins < 3; spins++> {"'. 
alert「Top is spinning! 1 *); J 

X A" 外部 whUe 祐坏 (i fj , 办 0 for 轉 

玎奋 * 个蚌麯坏中这 


基次饨印连代的, 含把 i 的 ( t 律加约 

SilL 含 i | 汴，«以茗汷 蛹坏 ㈣ 
玲不&加 i , 高袅金分別加 I 1,之* 3 


和 4 .. 


tops = tops 


1; 


f 5 




ft 含看到多少攻越 

Hr T &^ is ! 


代码 B 段多 





for ^var berries = 5; berries > 0; berries 里琴 ) 
alert ("Eating a berry "); 

} 

) 多少荦莫？ $ 


代码片段 4 


for 【scoops » 0 r - scoops < 10; scoop++J { 
alert("There's more ice cream* T, ); 

} 

alertC^ife without ic« cream isn't the same") 


ii 个審異。我们键钚了 

±Q*^i t J ^ ? 


fO 


伐唣 7 多少亡冰消淋? 
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JavaScript DOM 


■WmgL 

EjteRciSe 
SotytiOH 


把上面的代码插入到下面的 while 循环中跟踪执行 while 循环，按 
顺序写出得到的提醒。以下是我们的答案。 


♦铉颶承喝 


var scoops = 10; 

while {scoops 0> 
if (scoops == 3) 




接入的代 


^~SC^CFpS.. 的 3 的 T 这含发逢—汝。 

alert ( M Ice cream is running Iow * T, ); 


else if ^scoops > 9} { I 

alert( lT Eat fas^r^, the ice cream is goingr to meltf T， | 
else if (scoops — 2) { 


这也盔主一泛 ( scoo-ps 


aXert：(' r Golng once !"】； 

} else if (scoops == 1)( 
alert「Going twice f"); 

} else if {scoops —— 0) { 

alert ("'Goner 1 ); 

} else { 

alert("Still lots of ice cream left, come and get it* 11 }; 

} 

scoops ， lr 邊神印 ㈣ 於 scoops 減 i a 


二二 达墊部只廷/主—次， 务咩袅 
^ I'j ^ ^ 1 ■和^ 

M 笮 M 他条碑 部不巧 true 的片全邕’主 • 也 U m & oooy ^?6 
S ； J -, 5 和 4 时含执巧这个代砝蚋。 ) 


scoops 


> 


alert ("Life without ice cream ian f t the same . 1 


ii 含在林讦蛣乘后这行‘ 


诱约 的垅礞 I ’’ 


Eat faster f the ice cream is going to melt ! 


Still lots of ice cream left , coma 
Still lots of ice cream l © ft f come 
Still lots of ice cream left , come 
Still lots af ice cream left , come 
St.ill lots o £ ice cream left F come 
Still lots of ice cream left r come 
Xce cream is zrunning low ! 

Going once 『 

Going twice1 


and get: it, 
and get it, 
and get it ‘ 
and get 11_. 
and get £t. 
and get, it ■ 


Gone! 

Life without ice cream isn T t the saitte. 


你现在的位黄* 
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练习答案 




、令 


;(fA 代碚磁贴著案 





* ^ A 


这个代码在提醒中打印了一个著名的回文^问题是，有些代码写在冰箱磁贴上，可惜 
掉到地板上了。你的任务是把这些代码捡起来放好，使这个回文代码能正常运行。 

要当心，我们放了一些多余的磁贴，另外有些磁贴可能要用好几次！下面是我们的答 
案。 


4 




var wocdl = 
var word2 ― 
var word3 = 
var word4 — 
var words = 

var phrase = 


"a"; 

'nam M ; 
f nal p T, ; 
'lan a c ，T ; 
'a avan a p 1 


... . 




Nxptv/tecaihojj 
J * Mr， • «jnal WfMrn(J 


一 ' 




I It. 


for (var i = 0; 
if (i == 0) 
phrase 

else if (i 
phrase 


1 i++ 1 

Jr^ri 

— ^ 一 1 ■ 


pmiapr 


® 亡铽甚正«邊和殳#该部 一# 的句 
子 ！ 如果伢把磁铋部放到 3 合 a 的话 
£弒余看约这个 


: V—*— 1 

i phrase 」 


word 4 j 



word2 + wordl; 


alert{phrase) 


else if (i 


0) 


多余的磁站。 




i = 3 I ； I Hord3 i 

I ^ ij 


fy'*' 
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JavaScript DOM 





粉演浏踅器 
答窠 

你的任奔笼某粉成浏踅# e 
你*要薄柑 HTML ， 并由它 
构建你 tB 齣 P 0 M a 媾畤析 
右运的 HTML 在 T ®» 出 
P 0 WL 我 (HE 经馆伪孖3 
个头 D 


Movie Showtime^ 


Phm^ frflfii Outer Space 

Pliyrnf td ^fjC^uiL, tttlprt. Speciij utirniiny nmqjdli n M^n^hi 1 ， 

P^ltkldcn Plunei 

at S ： ftdfHH t ftuuppm 

<!doctype html> 

<html langs^en'^ - 

<head> 

<title >Movies </titl«> 

</head> 

<body> 

<hl>Movie $howtimes</hl> 

<h2 id^ n movi©l M >Plan 9 from Outer Space</h2> 
<p>Playing at 3 ： 00pm, 7:00pm. 

<span> 

Special showing tonight at <em>midnight</era>! 
</gpan> 

</p> 

<h2 id—' r movie2 T, >Forb idden Planet</h2> 

<p>Pla^ing at 5:00pro^ 9 : 00pm.</p> 

</body> 

</html> 


m 



document 
- 1 - 




ii 基我们的 pom 


h+ml 


head 1 ； 


title 





h 2 id=" J moviel r 


body 


1 



i 


span [ 






你现在的位 i ► 
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练习 




lencil 


以下是一个歌曲播放列表的 HTML ， 只不过这个 
列表为空。你的任务是完成下面的 JavaScript ， 
向这个列表增加歌曲，下面给出我们的答案 


^ ^ ^ 

I — j--| j - —— Wv _ Pf * y|Fst 

. : y c" 



<! doc type html> 

<html 2ang^ T, en f, > 

<head> 

<title>My PIaylist</title> 

<meta eharset= K utf - 8"> 

<script> 

ivinction addSongs () { 

var songl - document. getE^ementByJi { son§ f )； 
var 如 ” C = document spmZ ，_). 

var son§3 - . getElementByld (" B0n§3 ”）； 


My awesome playlist 


*Suede Siringa, by Elm P&gcly 


is 




如淼栽 5 ® 后舍..看 M 类似 d 
样的结菜。 


达咎代娱芍 Wi _ i ■揉兹朽褎 
正常 


son ^f innerHTML - M Blue Suede Strings, by Elvis Fagely "; 

gowg2 . tnng^HTMC = "Great Objects on Fire f by Jerry JSON Lewis 

song3, inng^HTWC = 1,1 1 Code the Line, by Johnny JavaScript"; 


window. owfoarf = uddSon^s 


龙食可以滅成你善欢的其 
他欲®^ 


</acript> 

</head> 

<boc±y> 

<hl>My awesoma piaylis t</hi> 
<ul i d= '^pl ayl i s t M > 

<Ii id=^3ongX M X/Ii> 

<li id= n 5ong2 M X/li> 

<li id= 1p gong3 M X/ii> 

</ul> 

</body> 

</html> 


JL 蘅的代 备个 ； i 
縈，林把 LiA^rHTML 设 K 敗 
曲名. 來 af 这呰 < LL >； t 牽的 
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JavaScript DOM 


iharpen your pencil 
、乂 Solution 




<!doctype html> 

■chtdl lang— 

<head> 

<tit le>T«ifipe ratures </t itle> 
<meta chars e t ='' ut f- 8 T， > 
<script> 

function showTemps () { 

var tempByHour ~ new _ 
tempByHour[0] E 59,2; 

tempByHo'kir [1] = 60.1; 
tempByHourt2] - 63; 
^empByHour [3] = 6 S ; 
'tempByHour [4] ― 62; 
for (var i = 0; i < 
var theTemp = 
var id 
var li 
(i * 

li. 
else 


下面的 Web 页面中包含一个列表，其中元素为空，等着你用 
JavaScript 填入温度。我们已经给出了大部分代码 t 你的任务是 
完成这个代码，使它将各个列表项的内容设置为数组中相应的 
温度 & 你得到加分了吗？下面是我们的答案。 


- r 存放湣度。 


. length 


t ++ 






[ i ]； 


t ㈣ p 


i ； 


存这 f 结舍禕这■和數组 3 (i 意峩 (0( 奎用 
數钼索？ L 銪以* 次楗 逐缯吋 
铽能分别访闸敌祖的备个光鱟& 


if 


doc'iiinaflt ■耷 y 

0 、 t 


(id) 


ihmctHTML 


f The temperature at noon was 


theTemp ; 


li, inner HTML = ^The temperature at 


was 


theTstnp 


^ 4Cif®si 龙值用的串， 

-f' 


window, onload = showTemps, 

</acript> 

</head> 

<body> 

<hl>Teniperatures</hl> 

<ul> 

<li id^^tempO^x/lix 
<11 id: 11 tempi” ></li> 
<li id="temp2 u X/Ii> 
<li id= M temp3 u ></li> 
<li id— M temp4’’></li> 
</\il> 

</body> 






- . o + 

Temperatures 

•】lte itFnpenmire a r noon ims 35? 2 

* tefiipefaiure at 1 w to «U 

* '(>k icinpcraiLm! ac 2 wa« ^ 

■ The lempenicu^ at j was 

* ^ lenipcraEiire at 4 wai ( s2 


M 


-r 




‘一多 3 
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练习萏案 



HTJKU 5 镇字游轶奢寡 
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3 事件、 


处理程年 。 锗如此类 








妻泉 | 




嘬.他着起来芊错，枣过.如 
果他不 时笮#糞正的拳劫，我 
们的兵 JT 会乎会更布省展？ 






tsm. 


m；>- 


m- 






t 个男 a 辽盈人 f 本栈 
拷，由你來 決边, a . 





你还没有与用户接触呢。你 B " 经 f 脈了 JavaScript 的基础知 ^[7 不 
- 过你能与你的用户交瓦吗？如果似而能响 应用沪 的输 A ， 乇们 就+ 

再 H 是文档 t , 而是冇半.命的、冇反应的应 I 在这一京中，你将 

■■画 - *■ ,.__■ • - • - ■ _ ■■■•■■ _■•■._■ 〆 • • 『■ • ■ 

学习如何处理一种用户输入形式 #;i (嘿嘿，这是个双关语），并 
把老式的 HTML-<ibnn>^ 素关联到具体的代 HI 听上去有些危险， 
不过这样确实功能强大。系 h 安全带，这章速度会很快，我们将 
从零出发~转瞬间就会到达交互式应用。 


译注！ form 不仗有 in 的含义，在这邕还隐含^^表羊” n 
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介绍 Web 镇之声 

准奮迸入 Web 锁之声 

嗯，到目前为止，这本书已经让你了解 DavaSaript 的很多基础 
知识，尽管我们一 J [在大谈构建 Web 应用，但确实还没有具体 
展示怎么做 D 所以，下而来点正式的（呵呵，也不一定！我们 
总在这么说)！构违一个真正的 Web 应用。 

来个播放列表管理器怎么样？给它起个有创意的名字，比方 
说……嗯， Web 镇之声 ( Webville Tunes ) „ 




Blue Suede Strings, by Elvis Pagely 

Great Obiecte on Fire* by Jerry JSON Lewis 

I Code the Line, Dy Jo^nrry JavaScript 

TTtatll be the Data, by Buddy Bi% and ^ Variables 


杏别 S 器中荽承你.秦玟 






y our RandQin Heart, by Hank "Mi Williams 


fjgHHHRMHMRH 

这軚是裁们 龙枸達 的左用 u 


n r uy nw iiv - - 

__________ - •— — ,j ~~ ~ ' 


令 龙 f 4 今到览器。 

' 务器叇代 也浼帛必震= 






假设你已经知道这个代码要做什么 


window ■ onload = init; 


能不能猜出这个代码可能做什么？ 


button. one lick — handleBut'tonCliclc; 
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事件与处理程序 


it M . 者篆 

出发前我们不需要创建一个庞大、复杂的 Web 页面。实际上，起步可以很 
简单。只需要创建一个 HTML 5 文档 T 其中包含一个表单，还有一个列表 
( list ) 元素包含播放列表： 


<! doc type htaal> 



就臬0洩的 KTMLSl ^ 部和体 D 


<hi:inl lang= n en"> 

< tiead > 

<title>Webvil le Tun© s</ title> f 

<meta eharset ^_ T utf - S "> 

<script src= IT playlistos M X/script.> 

<link £el=” style sheet" href ®'"playlist * css M 
</head> 

<body> 


■S 把 M 句扣 nScrift 故 4 
pLflgLUtjSr 盆件中 D 

笆含 3 —个样式表，让 ii 个接旋糾表在用 
有一个 f 票秃的蚪规。* 

► 

只菜龙一个阇摩的表荦， iif 节一个太本运 L 用乘輪 
入你的歃® „ 栽们使用5 HTMa 的 ㈤ ^hoLrftr 属#, 
它食$矛一个倒子,悉矛3个铪入域中龙餘入 


<form> 

<input type= ,, text' t id= H a ongTe xtlnput 11 


3ize= ,f 40 M 


placeholders"Song nama n > 




<input type= ,T button pl id- 1 'addButten" valu«=' f Add Song"> 


</ for m> 

<ui id=’_playlist f _> 


</ul> 

</body> 

</html> 


^戧们将僅用一个糾表存放这墊 欲 ®。 ma 
个列表鈞空，不过 ， 相后舦含用 
代爲衿玫…… 


这 f 有一个箱毬 f [d 
?4 ,用来命播故 

列表 揸交你 ti 釦的聆歌。 


试—试 


输人上面的代码，把它加载到你最喜欢的浏览器，翻到下一页 


之前先试着运行一下 


饬左这食卷的这个叇粟 



,^ 行 Wt ^ m^rurrnM 

: 卿 t：_ . 



SDng raame 


Md Sang 



4 记住，可以从 http :/^ wickedlysmaTl £ WTi / hfhUnl5 下钱这个样式表（和所有代码 ） s 
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关于按钮点击箏件 

不过我点击 “ AddSowg ” 羧钮时 计么也 浚布袭 

嗯，也对也不对 □ 看上去什么也没有发生，但实际 t 你的浏览器已经知道你点 
击了这个按钮（取决于你的浏览器，有些浏览器上可能会看到按钮已经按下 ） p 



真正的问题是如何在点击按钮时让它具体做点什么？这个问题的实际含义是， 
点击按钮时如何调用一些】 avaScript 代码？ 


需要两个方面: 


@ *襄-些 JavaScript 代铒，玎吆在 ffl 户点 
击 M Add Song " 飨钼对钕行。达令代铒将 
fe 嬙 M 到表增加歌（我们 sa 达令代 
码） 0 


(2) * 要一种方法兵联达整 代码. 从 ffiS 旦击 
桉饪时 JavaSGrtpf 扣埴$垣行你酌 M 增加 
歌曲"代码。 




用户点 击一个 按钮时（或者在基于 
手势的设备上触摸一个按钮时）， 
我们想了解这个按钮。我们感兴 
趣的是“按钮就是点击事件”。 
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事件弓处理程序 







处理擧件 

你会看到， m 示页面时，浏览器中会发生很多事情，会点击按 
钮，代码从网络请求的额外数据会到达，定时器可能到期（后 
面会介绍这个内容） • 所有这些都会导致事件发生，也就是按 
钮点击事件.数据到达事件、时间到期事件等（当然还有很多 

很多）。 

只要 有卑件 发生，你的代码就有机会进行处理。也就是说，要提 
供一些代码在事件发生时来调用。现在迅不需要你处理任何事 
件，不过如果你希望当这些事件出现时发生一些有意思的事情， 
就需要着手处理了。比方说，发生按钮点击事件时，你可能想 
向播放列表增加一首新歌《新数据到 达时， 你可能想处理这个数 
据，并在页面上显示。定时器触发时，你可能想告诉用户他们 
的前排贵宾票快到期了，如此等等6 

所以可以钿道，我们想要处理这个按钮点击 事件， 下面来看如 
何 处理， 
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编写按钮处理稈序 

制汀计划…… 

深人到处理程序和事件之前，我们暂且后退一歩„这里的目标是 点击“ Ad d 
Song” 按钮 T 向 jJ 【面上的一个播放列表增加一首歌 • 这个任务可以这样解决: 

i 違 S —个处瑾 我呼. 用来 处瑁栴 卢点击 *AddSo 叫"娥钿„ 

2■編驾处3程序，得到用户输入的歌#老，热后…… 

5■劍建一令新 无砉色 宮迖个新歎 .績下来 - 

4. 粑这令元棄熠加刻页®的叩 M P 



、任 郵 〆 


如杲你还不理解这些步骤，也不用担心，我们会逐步向你解释……■对现在 
来说，只需要对这些步骤有点认识，并按这些步骤编写处理程序就可以了^ 
打开一个新文件（比如 playlist , js ) 来存放你的所有 JavaScript 代码 e 

访问 “Add Song ” 按纽 

要想让桉钮通知我们出现了一个点击事件，首先需 要防问 这个按钮。很 
幸运，按钮是用 HTML 标记创建的，这说明……你应该能够猜到，它会在 
001 \ 1 中用元素表示，而 M 你已经知遒如何得到 DOM 中的元素^如果返回忐 
奄看 HTML , 可以看到我们将这个按钮的 W 指定为 addButtoru 所以町以 
使用 get Element Byld 得到这个按钮的 引用； 


var : button = document .gatElementById("addButton 11 )； 

现在只需要为这个按钮提供一些代码，在出现点击事件时调用。为此，我 
们要创建一个函数，名为 handleButtonClick ， 它会处理这个事件。稍 
后就会深人计论函数。对现在來说，先给出这个函数： 


这个函數名碎 ha^dLcButto^vClUle p 
后® 舍绍 ii 个培 d 


function handleButtonClick {) { 
alert("Button ms clicked!") 


函教益偁 3 -个洼松可 W 把代茲打忽利一个 
鈇中 ， 伤巧个丢盘名，4存笔龙的 
v 仔向时间 f 用 Ci 个代炫 


0钶， i 薄用这个晷&的我 
们 JIS #- 个拢礴。 


将调用焱教的希 蜇执行 的斛有 
代踢 放在大 相咢中 5 
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1 .建 a -令处躓 霱* ta 供户 《盘进搴 件 


为垵钮涛定一个点击处理程序 


2.編 S 处瑁和痒，禅射轚必名 
A 初建一 个斩无蠹色重 '达 
4,锊达个元最壜加則英£的 POM 


好了， 我们已经有了一个按钮，也有了作为处理程序的函数 handleButton - 
Click , 下面把它们关眹在一起。为了做到这一点，要使用按钮的一个属性 
onclick 。 如下设置 onclick 属性： 



var button = document .getElementB^Id ( >T addButton ta }; 
button ■ onclick = handl«ButtonClick ; 

诮用妒 taei ^ Ckv^gidC 后饵 l _ n 接纽，越下来把 o 喊 LXcte 
属性设赛的达现点忐事4 ㈣ 致们 Sjli « 角的蚤 数， 

你可能还记得，我们曾使用 window.onloadJg 性在窗口加载之后调用一个函 
数，那时的做法与现在类似，不过，这里是在点击按钮时调用函数。现在把它 
们关眹在一起： 


敎们将健用一个备蛊， 
考否面完贪如戧吋 7 ) 含调用冉执个 函數， 

window, on load ^ init ; 匕 
function ini^Q { 

var button = doctiment ,getEl«m«utById( ^addButtOii^); 

button.oncliek = handleButtonClicfc; T ^ ^ ^ 

, 费面加載 CM , 敎们将获 M 

> 旄钴， # 设赛它的山^公 


function handleBut-tonClick () { 

alerts "Button was clicked! ,T ); 

) 


这 个老击 处理饉濘含存戧们点 
击楗 m 的眾奇一个 援磲。 


试一 试…… 备 

输人上面的代码（放在 playlist . js 文件中），加载页面，随 
便多次点击这个按钮，每次点击你都会看到一个提醒。 


测试这个新的按钮点击处理程序之后，可以 
坐下来，研究一下代码，想一想它到底是怎 
么做的^ 

如果你认为已经想清楚了，可以翻开下一 
页，我们会逐步详细介绍，确保你真正记 
住。 
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怎么做的 

仔麵琎究崖生 3 什么…… 

前面几页介绍了很多新想法，下而再逐步分析这个代码，确保丰牢地把它 
记住。开始吧： 


A 你镟的®—件辠 A 在 HTML 摩单中放入一个相狂。有3拽柱，还*襄一 
^ 种方法珥认捕获用户旦击达个嫌钮.从 S 能飨行一巷代铒 6 为找，我 
们射建？一个处 aa », 笄托 e 賦 s 按柱的 ondidc 厲性。 



function initO { 

var button = document, getElementByld( "addButton 1 ") 
button.onclxck = handleButtonC1ick; 

) 


象有一 个 屢 
性-我们把这个 4 f * 设 i 為 



夺 uat 蚤教中设 i 3# 往 
点击寧_公 炫技序 （也軚 
星说. 存 s ® 龙威加 ft 
ZB ), 


Add Song 





用户 兔击这 个接纽的, 含 M 发 H ’ 


function handleButtonClick() { 
alert (_ T Btrtton was clicked f 


A 你还茸？一个简攀的处理我序， 告诉 用户达个揸纽狨旦击 D 稍疟我们 
w 会为达令处瑾毪序逋写*正的代铒.不过目前达个代钨粮殖含拥试。 



色含代鹆的处理 
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事件：处理程序 


A &餞編鸾7代铒 . 资《3经吻汫览 9 加截# 
w 在示.秤 m 安浆3她 a 我序……规在方辠 ffl 
备， H 欠灰金廉兩户的 J …… 



A 最疟，用户点击达令拽枉，推砝孖曲起作用， 
w 注*刻 e 省一个处 a 我序， 稃瀵用 这个处 a 




務萍 
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从 DOM 得 到歌曲 


L 建 立一个 户的点击事件 

2•編霣处 J 1 H 终，抵#« 


获得歌#名 


X 创逐一个麟无* fel 达霤 fcfc 
+. 将达个无砉增加 WJ 5 *«TOM 


我们已经准备进人任务的第 二步; 获得用户输入的歌曲名^ 一旦有了歌曲名， 
就可以考虑如何在浏览器中显示播放列表了。 

不过，到底怎么得到歌曲名呢？这是用户输入的东西，对吧？哈，不过\!^ 1 >页 
而中发生的任何变化都会在 DOM 中得以反映，所以用户输人的文本肯定也在 
00\1中 & 

要从一个表单文本输人元素得到文本，首先必须从 DOM 得到这个输人元素， 
你肯定知道该怎 么做： 没错，要用 getElementByl 山 另外，一旦得到这个 
输人元素，可以使用文本输入元素的 value 属性来访问用户在表单域中输人 


的文本，做法 如下: 






ul id= H piaylist H 


input rd= H songTextinput iJ 
value= H B(ue Suede Strings, by Elvis PagcJy" 


input id^^addButton 




用 方试 ，g w 珥 : 

沾叫 m±t 唧 at 餘入光 棄的一 个句杨 


得到表荦中 




修改下面的 handleButtonGick 函数，得到用户在表单输入元素中输入 
的歌曲名。对照96页的答案看看你做得对不对 a 


function handleButtonClick0 { 

var textInput = document .gat£lemantById{'^ 


vair songName = 
a ler t ( T _ Adding 11 


.value; 
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事件 5 处理程序 




rpen your pencil 


如■果你希望在点击按钮前先确保 1 用户确实输入了一些文本~又该怎么做 
呢 •（同样地，可以检查96觅 zE 的答案> T 



锄 


•农顧 W 參 



Dumb Questi9tis 


闽: 


如果用户没有输入任何内容，文本输入域的 


vaule 属性值是什么呢？这个值是 null 妈？或者如果用 
户没有输入文本是不是 “Add Song " 按钮根本不会 
调用处理程序？ 


"Add Song " 按钮可没那么聪明。如果你想确 
定用户是不是输入了内.容，要由你的 R 码来处理，另 
外，要如道文本输入域是否为空（也就是说，用户没 
有输人任何内容），可以查着它的值是否等于一个不 
包含任何内容的争，也称为空争，写作，就是双 
引 f , 而且中间没有任何字符。我们非常过解你泠什 
么会认为它是 null ， EJ 为我们说过 mill 是一个不包含值 
的变量的值，不过，在文本瑜人域看来，它并不是没 
有包含内容，实际上它包含一个串，只不过这个辛中 
没有内衮而搞清楚了吧 e © 

1^)* 我以为文本输入域的 “ value " 是一个属性 

( attribute ) t 但你把它叫做属性 ( property ) ,为什 
么? 

你说得对， va 〗 ue 确实是 HTML 文本檢八元素的 
一个爲性 Ultdbute ) T 以使用 value 属性初始化一 
个文本输入元素的值 1 不过,在 JavaScript 中 ，要访 
问一个用户输人的值，需要使用我们由 DOM 得到的 
输人元索的 value 属性 ( property ) c 


除了按钮点击事件外， JavaScript 中还能处理 
哪些事件？ 

还有一太堆其他鼠标亊件可以处理。例如 ， T 
以检測和处理鼠标犍按下，鼠标杪到一个元素上或 
者移出一个元素、良标拖动，甚至鼠标键按下并保持 
(与鼠标点击不同），另外我们还提到过很多其他类 
盤的事件，如新数据到来的事件、定时器事件 、与洲 
览器窗口有关的事件等，在本书后面你还会看到很多 
其他类型的事件处理 E —旦知道如何处理一个事件， 
所有事件就都能处理 r ! 

* 等待事件时 JavaScript 在做什么？ 

苓： 除非你组写了 JavaScript 代码来做一些工作，否 
则它会一直空明，直至事件发生（珥户与界面交互、 
数据从 Web 到达，定时器到期 等）， 这是一件好事。 
这说明计算机可以处理其他事情，比如让你的浏览芯 
能够响应，本书后面.你还会了解如何创建在后台运 
行的任务，使你的琍览器在运行任务代码的同时还能 
对事件做出★应 
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如果你希望在点击按钮前先确保用户确实输入了一些文 本， 又该怎么做 
呢？我们的答案 如下: 

funchipn handl^But-tonClick () { 

var tiextXnput — do cumene. ge^E lement:ByXd. ( fl songTex t i nput <f ); 

var aongName = textlnput.v^lue; 可以值用一个枵 so 叫咖似津耷一 

if CsongName == l ' u ) { ▲一一 + 空庫呒较，确係用户 4 共輪入 3 —普文 

alert ( f> Pleas© enter a song ,T ); 本。如蓽沾 (H 沒有檢入 d K 兩 容. 妖漱送 

} alse { 减礴#龙求他 们餘入 一酋欲 D 

alert (^Adding ’_ + songName )； 

} 


练习 m : 


|iharpen your pencil 

Solution 


令、 






€ 


i - 

__ __ 


修改下面的 handleBimonClick 函数，得到用户在表单铕入元素中 
键人的歌曲名 . 以下是我们的 答案： 


.• 、 -•■-■ 心 , A • lLm zt 


liiii 



•tWiP：// 


E/yhwnJIwi 

nf Hue SiMdi 


ttrirtgi, Chrfij 




酈 


茗先 tf 洱趵表辈中立冬輪入无景的—个 4 庞。我们$经# 
这个无豢柜定 id 史, Mk / ■苟以健角达个 
ud 0 £t £ M ^ H — 个？ I 闲 e 


function handleButto nC li c 1c 0 { 

var text Input = document. getEl^mentByldf M songTextInput TI ]; 

■ ■ ■■*■»■» >-B4#i|«a + |i + l-§ + i 

var aongName = textlnput .value; 

4 + B + 罾 + ri T - • r r ■ T 


} 


^lertC'Adding " + songName )； 、丈本 輪入走岽 的 Vfib^ e 属性色含殳 

. 本铪入域中#入 HUA - 

个摩。 沒这霣 a 们鈀 ： i 个立 冬馥至 

现沒 Ht 殚出一个 拢筠， ii 含器云 ^ Addi ^ 

和歉曲名, 
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如何尚页®增加一酋歌？ 

我们已经做 r 不少事情了！你 <以向表单输人一个歌名，点击 
AdcJSong 按钮 T 得到你在表单中输人的文本，所有这些都可以 
用代码完成。现在我们打算把播放列表就昆示在页面上 * 看上 
去应垓是这样的： 






1. 建立一个处 J 1 卷处遝相户鉍点击事件 

H #3遵一个鰣元* ft 會这 f 新歌 

«l[Mr M •'' 

卷.抖迖个元素增加刻裔驀的卯 M 



任騮 



n 娜 ㈣ 剛 _ ~ 

^ MjfeJ hrm."loc^hQ&ti-tollim^ac-Fk^-HT'~ 


Song name 

Blue Sueda Strings , by Elvis PageJy 


Add Song 



i 击 11 Add 接钮你的 

ja 他 Script 代 iit 柢 H 芭歌墦 加鉍资 
®_ t 的歡曲妁袭 。 


我们要这 样做: 


(?) 你玎能 S 轻注 tst 最孚输入 HTML 
对我们 E 轻在 HTML 标圮中故3 —个空 
到摩（准礁 M 讲，是一个空齣 < ubi £ 
素）。©此， i ) 前的 P 0 M 会是达#: 



a 基 pom 中的列 
表，0爾总迳1 
空的。 



② 


每次输入一个筘联时，我们希望尚这令无序 
列表堆 加一个 新刊表顼《 为此， 要劍 a —个 
新的<|!>无最， x 中包宫歌名。然后将达个新 
的 < li > 元纛埯加到 P 0 M 中的仙 1>。 一 s 增加，洌 
览器会完成 e 的工作，我们将蚤 s 彳贞涵吏新* 
軾好傖<11>一£在邡里一桴 e s 然， 达些都是 
用代码完成的 a 再 t # P 0 M . 碥保你镐实已 
经3 _我们**做付么。 



body | 

r …’ 1 餘入 一 t 敬吋 ， 龙 

- J - n 初連一个轵的的表 

g ^；{< d > X ^). ^ 

糾表。 
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创建新充素 


对于这里显示的播放列表，画出增加所有这些 
歌之后的 DOM。 注意歌曲增加到页面的顺序， 
确保 DOM 中的元素顺序也是正确的。我们已经 
帮你完成了一个。学习后面的内容之前，请对 
照检查这一章最后的答案 D 




Song 

1 Add 

Slu ® Suede - - 

㈣ 0bJOCtl °° F 

f 如版 UfMl , 坤輪 my JavaScript 

i Thani 咖細 Vari 邮明 

Y0W __ Heart 办 He 味加 ■ Wia ^ 


document 


html I 


head 


T 


I body ^ 



script _ form | 


ul id= w playl ist M 


I input I 


input 


U ^ 


Slue Suede Strings, 
by Elvis Pagejy 


要对 <K> 元素增加到父元素的顺序做些假设吗? 


必出 X>OM 的萁余部分 。 
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如何创 建^ 个新元素 

你已经看到如何通过 DOM 访向现有的元桌。除此 以外， 还可以使 
用 DOM 创违新元素（下一步还能把这些新元素增加到 DOM , 这个 
内容稍后介绍）。 

假设我们想创建一个<11>元素 & 做法如下： 

僅用来 钻逢 撕无鴦 办 它全达 © 择 
无豪的_个？ I 用。 

var li — document. creat-eElement ( rT li T1 )； 


将这个射； fc # 喊 
ii#LL 


把 4 望射 4 的无橐类轚饩 4 
一个 $ (4 入 




S 


■:运冇插入 JJdom 。 规在达只裹一个利处； 1 谗的尤著 . 
索找到- '个沄 1 D 


现在有了一个新的 < li > 元素，其中还没有任何内容。你 
已经知道在元素中加人文本的一种 方法： 


1 i. inner HTML = songName, 

\ 7 

&含把 < Li > 的内容 


丄刪 




□□ 


BJite Suede Strings, 
by Elvis Pagely 


达 t 我们绣 f 1 ) 的斬的 L 元 
棄的象，不过它 汪 不 & 
1 >PM 的一郜分 I 
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增加新元桌 

向 POM 燿加新无素 

要向 DOM 增加新元素，必须知道你想把它放在哪里 。嗯， 我 
们当然知道要把它放在 哪里： 这个 < li > 元素要放在<111>元 
素中。不过怎么做呢？再来看看 DOM 。 还记得吧？我们说过 
它就像一棵树。可以考虑家族树： 


ut 克一个处 aa 炖理饵户的喪击畢许 
2,蹁驾 5 tfl 孜序.得到敢#名 
a 釗建一个新元素61这祐新歌 

4. 将这个无加 fd 霣翬麯 _ 

舞任 m 


3 ? 






妖律暮容兹的老福 
在,话号树的领運。 







孩子 • HTMU 的在痒敖 

Ob & iA 糾从。 




1 


h+TMU 有 猓个葙 孑 ， Utflrf 
bod g 的双桌 1 

HTML C , 



body L 

r J 


< r ^ 


title 



a 


ul idmriisr 




input I input | 


A 


这署我们的 wi a ul 的 
^bodu t K Lg 沒 
有 Dt 子 …… 


所以，要增加这个 < ii > 元素，需要让它成为< 111 >元素的孩 
子。为此，旨先要在树中找到 < ul > 元素（已经指定它的 id 
为 "playlisr ,所以这很容易），然后，要想增加 < li > ，需 
要告诉 <□!> 元素为自己增加一个新孩子做法如下： 

f 走用利 "pUyltst" 的 <»1> 元 ：| 的一个 
;1 用 s 

var ul = document , getElementByld (^playlist 11 ); 
ul. appendChild(ll); 

让 < tU >^ 素缯加 <0无#饩為它的一个子尤 # 。一 2 
n EOM 中 < LL > 揉金咸為< wi > 的一个孑爷点 f 列场 
器金抝应 f 靶荽承. 反蚋 这个韌 


HQ 


……我 们#«达个新 
< U > 光舞威为 <\^> 
W 孩子。 


Blue Suede Strings, 
by Elvrs Pagely 


S !/l if £rp-ji£iM^ C^i t Id 
y 靶的 < u>x 景坩 
士， ^ m > 尤 # 吋含坩 

加到现 ft 的萁他 < U > 
无昜的运面。 
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事件与处理程序 


集成在一起 . 

下面把所有这些代码集成在一起，放在 handleButtonClick 函数屮 
如果还没有输人，现在就来输人这些代码以便测试 & 

function handleBu^tonClick 0 { 



var text Input = document, getElementByIdC t, songToxtInpijit , '); 
var aongName = textlnput .valm 
var li =* document. createSleraent; 
li.iimerHTNL = songHame; 

^ td ^) 、 L ^ Ust rt 的 < uL > 展物 < U > 的 

var Ml = <JocwMnt-gotElamentByIdf T playlisf’h. ^ — ^ 爻无着。鲥 W ■ 下泰来徉利这个无黃 ， 


__老光，含 1 遠新的< 1 >丈衰， 

欲名埒放存 

一然后 T 把 ii 个; it 的内銮设若巧歌名。 


ul. ^pp« ndChi Id (1 i) t 


<- 


ii S -戧 f ]. 鏖求 艾 走砉与它的 
个新衮子。 


毵后 fl 用吓把寒 ff 


* * * 曝 ■ * 


试一试 




It “ Web 镇之声”派上用场，增加一些歌曲 
我们得到的结果。 


以下是 


。。 Webvi 9 l« Tunes 

0 tnw / /itK^moit/-icth/Held-R/st-HTM l C 




Sona rvinu_ 

Blue Suede Stfings, by Etvte Palely 

■ ■ - — W . •■-■fc，. ？■ i i-, ■■ ■ 9 1 ■ - _■?■ ■ " ■■ ■■- .■•-.■■ _ ■■ ■ _ _ _ 一 ■ ■. _■_ - ■! 曜 ■_•■__ — — — — ■ ■ •- 

Gns^t Objects on Rf© r by Jerry JSON Lawis 


• Add Soog 


I Code the Line, by Johnny JavaScript 




ulids*ploylisV|lf 

L l L 


Thatll be tha Data, by Buddy Bitty and the Variatotes 
Yoor Random Heart by Hank p, Math" Williams 


7 i mV ^ f ^ k , 

c 

坩加？辦有 a 巷辦 < u >； t 景 

H c*OMt k i 

m , 我 fo 輪入一个抆名 # 点法#毬 
时， a 苜欷杖含坩加 f *) MM . 所鉍 a 
们金希利页®挺愛„这芒新歌金出规 
fk 列表中。 

〆 
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播放列表应用回顾 


诊颜我们傲的工作 


这一章你做了很多事情（尽管时间很短！）。你建立了一个播放列 
表应用，哥以用来输人一首歌 v 点击一个按钮，然后把这首歌增加 
到页面上的一个列表，所有这些都使用 JavaScript 代码完成， 


❶ 


笛先你建立？一令羃件处 a 我序.用虞处理用户盎 
击 _ A ^ S 0 i ^ r 滅饪的事件 a 你 射建？ 一十&数 
haKdieVutfonCIick , M Wd Sana " M 钰的 oiidlck 臝枝 
设 1 为迖个备敷 c 


(Add Song) 


7 


用户魚击接鈕紂 ，含溪用 
havui Le'&utto^cUefe I|fI 4 0 


A 摟 f 采.为拽鈕点击攀件处頊租序逋写代码 ，从嫌入丈 
本域得到欲名 9 你值用 fnput.value 厲性來佴剡文本《墨妄 
还增加 了一个检金.裼保坩户裼实#入：？一 t« fl 
用户 S « 输入.你轼拽 《他们 a 






bc<ty — 


form 


4 ha M 中，你全得 f ) 用 
户镅入的歉名， 逢过使用 i ^ fut . vaL ^ 
■SflUDDM 得到 亡本 .， 


ul y=、loylisf 



jnfHit id-^itnigTextlnput' 




A 要把达蓄联增加到嬙故列表 ， ^document 

mat 成 lement 射建？一 个<1 b 无素 * # 使用 i imerHTML 
拕这令 元景的 内窨设 B 为联名 。 


□Q 

Slue Suede Strings, 


釗瘋一个妒的 < LL > 走景* 4 tll f 
達个 < U > 元素的内窖的歉名* J 


by EMs Pagely 


£| 蕞后，托这个新<11>元素作为 < lil > Kx * 的孑无最增加到 
w 卯 M 。 达里*用？ append ( Md , 吿阶 ul > 元* -埴加伽无 
最作为一个子无纛" ， 从布把它壜加到 POM ft 无*增加 
到 P 0 M 时，浏羝鼉会更新两户廉到的莨軋糌故刊雇中将 
包贫达黹* L 


« 

I 


body | 


ul id= w p lay list* 


奋 DOM 中坩知 _ 个射的 
今克#食 t 新两面 d 


dj| 
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事件与处理程序 

- - ……一 — 

WT 59Mss 

# 




等—芦二我知搋我 钔褊 实在和 tom 等打交 a , 
不过达 个真芷的 Web 迨麻码 7 如粟我允射 KS 兵縳， 
箝布歎軾和不鬼？。知1达單:-个島珥的瘅森 t 我觭纗释 

刊袅项是爷1该 一4 保 i 栴？. 


同意，播放列表确实应当待久保存。 

毕竟，如果歌曲不■能保留，输人这些歌又有什么意义1另 
外，你:可能述想增加很多艽他功能。例如，你可能想使 
用音频/视频 APf 增加一个音频接口，使你能真正 听歌； 可 
能想使用一个 Web 服务与朋友分享歌曲（如 Facebc^kto 
Twitter ^ I 可能还想找到当地其他喜欢相同艺术家的 A 
(使用地理定位 API) ，相信你肯定还有更多想法。 

不过光来看这个播放列表……我们只是想让你热热身，构 
建一个小的交互式应用 T 这个播放列表应用就很合适 D 另 
外,荏储歌曲需要甩到 HTML5 Web 存储 API， 好几章之后 
才会介绍 

嗯，另一方面，我们确实不想在这里有所隐瞒…… 

糖的下一蒗。 
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谀品代格 











• ' - 




我们已经为你做好了一些代码，可以用来 
保存你的播放列表。对现在而言，你只需 
要输入这些代码，另外对你原先的代码做 
两处很小的改动、你就会得到一个 HTML 5 
存储的播放列表了 a 

M Web 存储” 一章中我们会介绍在浏览器中 
本地存储信息的所有详细内容，不过，现 
在先把这个播放列表运转起来， 

当然，仔细査看这个成品代码也没有坏处。 
你可能会惊奇地发现你已经了解不少，另 
外很多内容即使不了解，你也能猜出个大 
概。 



这个成品代 码在旧 6或7 中 不：: 
能用. I 

1E 6和7不支持 WalStOTaj^ i 

所以如果你使用 1£ ， 一 疋要用 i 
版本&或更髙版本。 : 




如果你从 fi 彳 e :// 提 供页面，而 
_ 不是从一 个类似 focalhost :// 

wStf WHISKS? 

成品代码可能不能正常 I 
作 * 


!我们会在后面一些章节中处理这种情况 
(对于新的 HT / ViLS 特性，这种情况经常出 
: 现）。对现在来说 T 如果你不希 望运行 
f —个服务器或者不想把文件复制 到一个 

联机的托管服务器 T 可以先使用 Safari * 
i Chrome 。 
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如何增加成兵代码 …… 

下面的成品代码可以增加到你的 u Web 镇之声”应用中，能把你创建 
的完美播放列表保存起来 & 你要做的就是建立一个新文件， play ¬ 
list _ store . js , 输人下面的代码，然后对你现有的代码做两处改 
动（见下一页）。 



谀品代珐 

舞任郡承 • 


function save (item) { 

playlistArray ^ getStoreAr ray ("playlist ) 


var 


JSOH.stringify( P laylistArray»; 


loatdPlstyli 1 ® t () { 

var playlistArray = getSavadSongsO ； 

var ul document. getElementByld ("playl i3t u ); 

if tplaylistArray ! = null) t ^ 

for ^ar i = 0； i < playliatAirray. i ■ 州 { 

var ii = document- create£le®ent t 11 li ,¥ ) / 
li^innerETML = pljiyliotArray [±1 ； 

ul,appendChi 将这咎代茲松入」 pUyllst.store. 
} ] 6 

) 


function getSavedSongs { 

return getStoreArray; 


function ge tS toreAr ray (key) { 

var plaLvliatArray ^ localStorage.getltem(key) 

=flull II playlistArray =- 
new ArrayU; 


mi 1 


if 


(playlistArray 
playliatArray 

) 

else { 

playlistArjray = JSON.parse{playli&tArray> 

) 

return 
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试一试保存的歌曲 




好了，重新加载页面，输人一些歌曲。退出 
浏览器。再次打开浏览器，井加载这个页面 & 

你会看到存储的所有歌曲都安全地出现在播 
放列表中。 ^ 

4 你泉不！ 6 舰体 ㈣ 冰放列幻 ？ ㈣ 
它 _ 咏 7 g 以夸聋 Weto 俘确 ’ 一辈！ 


I，_ . _ —T-. ■ 

n 4 irr * i * 

Bk « Su 咏 Slrbgi f by EMs Psgely 
Qw ! Ob?wtt on Flm , by JAny JSON L «<# i E 

l~ ^ ' ■一 一 - V*. — • 一，， . “ r . . j ^ - 

I Cadettw Urw , by Jo+mny ^ BumSqr 4 pt 

TT»fltU ba Itm Dtla. ^ BuiM r 咖 _ Vart 曲 1 « 

- ~ - - - ■ 一 ■- - -*- — 、 _ *•• ■ _ . _ 

Vouf R »>*3 m Hftartj ty Ha nit lytaiti 1 whuottk 

-- ... 一 … -— 一 _:- . _ ： I 



存储播放列衷 


集成成品代码 




^1- 




还需要做几个小调整来集成这个存储代码 9 首先，在在 playlist , 
html 的<11©3<5>兀素中增加一"个指向 playlist — store . js 的引用 & 

<script 3 r c= f, pl ayli st_* tore. j s "X/acript> 

<acript src= ,T playlist ,js ,T x/acript> 

现在只需要向 p 〖 aylist . js 增加两行代码，分别加载和保存播放列表 


这金加 載成品 代砝。 


M 谀品代碚 | 




function init<) { 

var button = document. getElfim«ntById( ^addButton^}; 
butt,pii, oncl ick — h^ndl^BuftonClick; 

loadFlaylist (); - --这样一来 T 法你加載费忝的轼 UIStorflgeis 栽6 


存餹的歌曲.值伢舴之箾俘存的教曲 


function handleButtonClxclc (} { 

var textlnput = doctiment .getEleroentByld ( T, songTaxtInput"); 
var songName = t ： sx-tXnput,value ； 
var li = document. craateEl^meat ( T, li TI ); 
li^irmerHTML = aongHamejr 
var ul = do cume nt. geliElemen-tById ( 11 1 i s t TP ); 
ul.appendChild(ll )； 


sav« (• ongHame) 


> 




荔汶 ifc 冰故 H 表缯如 —€ 歉的 ，达令 
把它侈存起来。 


曲筘 页重 
欷會栽邳 

i * 加在 
■-达器 ， S 
io 览裹们 
嫌洌笼右 
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事件与处理程序 



(4) 创建了新元素并且增加到 DOM 。 


还不错丨既然你现在对这些内容如何结合有了一 
些直观的认识，下而再朝 JavaScript 方向走得更远 
一点，看看函数和对象究竞是怎么工作的。 

不过，这可不是常规的旅行，绝对不是，我们会 
掀开阴井盖，偷偷瞄一眼 Web 镇的函数。 

有兴趣吗？来吧，和我们一起进入第4章…… 
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事件处理程序和 DOM 回顾 



^^BULIIT POINTS 



你的浏览器中一直在发生很多事件。如 
果你想对这些事件做出响应，就要用事 
件处理程序来处理这些事件 D 

点击 Web 页面上的一个按钮时会触发按 
钮点击事件。 

处理一个按钮点击事 件时， 要注册一个 
函数来处理这个事件。要做到这一点， 
需要编写一个函数，并把按钮的 ondick 
属性设罝为这个函数名^ 

如果注册了一个按钮点击事件处理程 
序，点击这个按钿时就会调用这个函 

数心 

要编写函数代码作为处理程序对按钮点 
击事件做出响应，可以提醒用户或者更 
新页面，也可以做其他响应 & 

要得到用户在一个表单输入文本域中输 
入的文本，要使用这个输入域的 value 
属性 a 

如果用户没有向表单输入文本域输入任 
何内容，这个域的值将是空串 { 

可以用一个 if 测试和=-来比较变量和空 
串是否相等。 


■ 要把一个新元素增加到 DO / VK 首先需 
要创建这个元素，然后增加这个元素作 
为某个元素的子 元素， 

■ 使用 document,create Element 可以创建 
一个新元素。将标记名 （例 如 ， “ir ) 
传入函数调用，指示要创建的元素。 

■ 要在 DOM 中增加一个元素作为某个父 
元素的子元素，需要得到这个父元素的 
引用，并对父元素调用 appendChild , 
传入要增加的子元素 D 

■ 如果使用 appenddhild 向一个父元素增 
加多个子元素，每个新的子元素会追加 
到其他子元素的后面，所以它们会出现 
在页面中其他子元素的后面或下面（假 
设没有用 CSS 改变页面布局 ） D 

■ 可以使用 Web 存储 API (localStorage) 
在用户的浏览器中存储数据。 

■ 我们使用了 localStorage 保存播放列表 
中的歌曲，这里采用了成品代码 & 你会 
在第9輋了解更多有关 localStorage 的内 
容。 

■ 下一章你更多地了解 DOM 和 JavaScript 
特性，比如函数和对象。 
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bt ^5 填多游琰 

给 S 己留点时间来消化学过的内容，好好理解 HTML 和 
JavaScript 之间的交互；考虑它们如柯结合 9 考虑的_ . 
时，可以做做这个填字游戏，复习一下有关内容，所有单 
词都选自这一章. 





件苟处理程 


♦任 郵承 




横向 


纵向 


2. DOM 用来创建新元素的方法^ 

3. DOM 用来增加新元素的方法。 

5. 用户点击按钮时发生的事情。 

6. DOM 就像一个家族_, 

7. DOM 树的老族长。 

9. 如果用户没有输 A 任何内容，则表单 翰入元 素的默 

认值是一个_串。 

10, 成品代码中用来启用存储。 


1,负责处理事件的代码。 

1 ‘插入新元素作为一个_。 

4. 我扪的示例歌曲中用到的艺术家。 

&接下来要介绍什么？函数和_ 

9. 按钮点击是—^« 
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练习答案 



« ^ 


■—— 
iffNo ^ 


Urt\OA 


对于这里显示的播放列表，画出增加所有这些 
歌之后的 DOM tt 注意歌曲增加到页面的顺序 T 
确保 DOM 中的元素顺序也是 IE 确的。以下是 
我们的答案^ 


^~ — 
name 


-fnr-HTXL 




:^ Su « d * Stffnon , by Elvis PagB*y 

^ m 4 Jerry J 咖 ㈤ 8 

be the 吨 

⑽ R^ mHwtjbyH 咖叫 时陶 峨 




-3 


document 




i 


Ktml 

JJililM PUUlii # 


heod 


body 


J 


这 4 dom 的真余部分. 


title I script 


form 


u\ id= M playlt5t ,( ^ 

N L |_ .HI F 


input I input | 

— .~. - •.... -' — % --— ..., > 




Blue Suede Strings, 
by Elvis Pctgely 

Greet Objects 
on Fire, by Jerry 
JSON Lewi£ 






Your Random Heart , by 
Hank 'Math" Williams 


要对 < ti > 元素增加到父元素的顺序做些假设吗？ 


That'll be the Data, by 
Buddy Sitly and the 
Varrables 

r Code the Line, by 
Johnny JavaScript 

是的. 的冶 a 含髟 喊歌曲 4 赉电上的 s 矛喊 
埤。 ctppendC^Ui 窝4 把扣犬景遠 加妇现有子 
元费的 H 
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HTJVH 5 稹字游姨奢寡 



事件处理程序 



夸往酆承參 
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4 JavaScript 备数和对象 




正式 Ja“Script + 



你能把自己称做脚本开发人员吗？ 可能吧，你已经俺得不少 
JavaScript f , 不过，既然能作为一个程序员， i 隹还只想当个区区脚本 
开发人员呢？现在严肃一点，是时候了 J 尔该学习学习函数和对象 ，要 
想编写吏強大1吏有组织1而！1更易于维护的代码，它们正是关键所 
在。另外， HTML 5 JavaScript API 中 也大莆 使用了函数和对象，所以你 
对它们越了解，就能越快地熟悉新 API 拃熟练掌控。系上安全带，这一 
章要求你必须全力以赴…… 
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定义你自己的函数 

扩展你的询汇 

你已经可以用 JavaScript 做过很多亊情，下而来看看你了解的 - 
些内容： 

—个无# 。 

<script> 

var g^ueesInput = docmnent + getElementByldC"guess") 
var guess = ^u.sslnpu.t.value; 
vac answer = null; 


饵利一个表荦餘入 t 本 
域的 a。 


var answers 


T red '% 

' green ", 

'blue T, ]; 


别爐一个斬數通. 
存瑀入宮得事 s 



bl 







var index = Hath. floor (Math. random 0 * answers. length) 

\C ~ 、 #昶 条件 漱出軻 

if (g-aess == ansners[index]) { 

answer - ^You 1 r« right! I wa& thinking of 

} alss { 

answar = M Sorry, I was thinking of ■’ + answers [indox]; 

} 

alert (answer); 

</script> 


渾的數边的—个屬性 


answers [index]; 





值用别 ！ 器圣數 . 比如 flUrtq 


不过，到 h 前为止，你 r 解的很多知识都是不正式的。当然，你可以从 
DOM 得到一个元素，还能为它指定，些新 HTML, 但是如果让你从理 
i 仑上准确地解释 document .get Element By Id 做了什么，嗯，这可能 
有点难度 6 不用担心，等你读完这一章，就能轻而易举地回答这种问题 
了， 


为了达到这个 H 的，我们井不打算一上来就对 get Element Byld 做一 
个深人的理抡 分析。 这可不是我们的想法，我们希望更有意思一点：先 
来扩展 JavaScript 的词,用来做一些新的工作。 
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如何增加你 I ) B 的凾数 

你-直在用内 H 函数，比如 alert ， 其至 Math . random , 不过如果想增加你 
自己的函数呢？假设我们想写类似下面的 代码： 

var gu^sslnput = document. getElementByld ( T, guess 11 ); 

var guess = guesslnput 【 value; 获 3 疋 用户的 gw_ess;t 泰， 

英一样 .. 


i - 

JavaScript 函 数对象 

Sirf 1 參挪 


♦僉郵承 



u <^ s ：- 


var answer = eheokGuess {guess); 
alert .{ answer }; 




创建一个 checkfruess & 数 


A S 釗建一令凾數， fSffi 到 function 兵鍵字，后®是一十凾 
数名比如 M check & uess " ^ 



function ch^ckGues s (guess) { 
var answers » [ ^red 1 ^ 


^ 数极供 o 令 sat 多个 参数。值麻参 

达里我们踅一个 
参数： 用■户稍到的荅策。 


^ green'V 

^ blu © 11 !； 

var index = Math .floor (Math, random (J * answers ； length); 

if (guess == answers [index] J { 

answer ^ ''You're rightf I was thinking of 11 + answers[index]r 
} else { 

ariswejr = ,f Sorry, 3C was- 'thinking of T, + answers [index]; 

} 

return answer / 

- --- — 



^ 可味垣 ®— 个值作 为通 ffi 这个凾 ❽ 

数的銥 1-, 达基:珥逸的在达黑， 
我们返-令其中包言一 
令滴套。 


編® 凾数体 ， 这要放在大緣咢么闲 & 体中包言 
完成&&工作的所布代铒。这里的 中重 
用 iii - 克的代铒。 
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函数斤 H 

蚤数如 何工作 

所有这些如何工作呢？我们具体调用一个函数时发生了什么？卜面做 
一个深人的分析： 


令、 






当然了，首先我们需要一个函数。 

假设你刚编写了一个新的 bark 函数，它有两 
个参数： dogMameiffIdogWeight , 夕卜述包 
含一点点代码，可以裉据狗的重: t 返回狗叫 



a 軚4我们阇俛劣 h 


function barJt(dogName f dogWeight) { 
if (dogWeight <- 10> { 

return dogNante + " says Yip"; 
} else { 

return dogti^me + ，T says Woof' 

) 

} 


现在来调用它！ 

你已经知道如何调用一个函数；只需要使用函 
数名， 井提供所需要的实参 a 在这甩，我们需 
要两个实参：一个字符串提供狗名，另外还要 
提供狗的重最，这是-个整数。 

下面做出调用，肴打它会怎么做： 


1 

bark( rT Fido_S 50}; 


5 系个食誊 T 




if 用 barter F 食参含蛾 
给 barfed 數中的行黍名 



function bark fdogName, dogWeight) 
if <dogWeight <= 10) { 

■ T says Yip r 


行枣出规杏也數中，魷备 淹兩 
我们传入的值。 


return dogNaxne 
else { 

return dogName 


says Woof' 
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JavaScript 函数 1 对象 


另外，让函数体完成工作 & 


奢_承參 


将各个实参值赋给函数屮相应的行参后一比 
如将 “ Fid〆 赋给 dogName , 把整数50赋给 
dog Weight ， 接 F 来就可以执行函数体中的 
所有语 句了。 

语句会从上到下执行，就像你原先编写的所 
有代码一样。不同的是，我们所在的环境 
中，行参名 dogName 和 dogWeight 已经陚 
值为你传人函数的实参， 


function bark (dogName r dogWeight) { 
if (do^Height <= 10) { 

return + " says Yip ”； 

} else { 

return dogName + lf says Woof ,T ; 

> 

} 4 

、泛笙执行体中的所有代 


^ tis ( i r 蟲激不一安龙遂® —个 d 不汶』 
可选地，体中可以有 return 语句.■… - 數确食这節？ — 个沽。 

…… 通过 return 语句可以向做出调用的代码返回一 
个值 e 下面來看这是如何做的： 
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函数和对頦的重要性 



真该好好谈谈了…… 

知道，我们当然知苽，第々赍之前你认为现 fr : 会飞跡 HTMU 
机场，没错^ 我假货 rr D 不过，在此之甜，你确次需要了解 
HTML 5 JavaScript API 的一些基础，这一祭就来讨坨这个内容 0 

那么这些基础是 f | 么？ i ^ aK ^ IPTMLS-JavaScript API 是由对象、 
方法 f 也称为 '函 数） 和域 性构成所 LX . 要想运掌握这些 
APF , 你需要很好地爾解这些内^容。当然，你也可以试试看，如 
果不 I 解这些.费础会怎么祥、 不过猫 若是这样， 3 你不能很_ 
他用 APf 时 -( fe 柄犯大•虽:错误，以及编写有 bug 的代码 > ,可能 
对 API 根 4 不知所措。 _ 


mx ~^ 在你深人这一章之前，我们只是想提醒你下面要做什么。 

::有歷中辞晴脊进您坪学完进二章，你对子对象、函数和: 
- E 吴枭容的理解要强 过当满 @%&^ avaSc r ipt 

■■ ■ ■ ■ ■■■_.■■ . « • . I. - W^, ^ -- 

——._ 脚本开发人员^所以二定要:用点心。 . :: 
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JavaScript 函数 i ] 对象 



岛数內範隹:场 

本周访谈： 

你不知道的》些东西…… 



Head First : 欢迎你，函数！我们真希望能深人 
了解你在做什么。 

函数：很高兴来到这里和大家见面。 

Head First : 如今，你们注意到很多刚接触 
JavaScript 的人并不太愿意用你。他们只是一行 
一行.从上到下编写着自己的代码他们为什 
么要了解你呢？ 

函数：嗯，真遗憾，要知道我的功能可强 大了# 
可以这样来考虑我：我提供了一个途径，可以 
写一次代码，然后反复地重用这个代码。 

Head First : 既然说到这里，很抱歉我得说两 
句，如果你只是允许他们反复地做同样的事 
情 •这有些枯燥吧 t 是不是？ 

函数：不，不，绝对不是，函数是参数化的。也 
就是说，每次你使用函数时，都会传人实参， 
这样就能根据你传人的内容得到不同的 结果。 

Head First : 是吗？ 举个 例子？ 

函数：假设你要告诉用户他们的购物车中商品总 
共多少钱，就可以 编写一 个函数(=0师此&3匕0- 
PpingCartTotal^ 然后可以向这个函数传人 
属于不同用户的不同购物车，这样，每次你就 
能得到购物车相应的商品佥额了。 

……另外，再说说你刚才的评价，你 

说新手不使用函数；这可不是事实， 

他们一直都在使用函数： a 1 e r t 、 
document , g ^ tElement , Math.random 

都是函数。他们只是没有定义自己的函数^ 


Head First : 噢，对了， alert 确实是函数。不过 
另外两个看上去好像不是函数吧。 

函数；哈，它们当然是函数，要知道……先等 
等■…” 

•… 噢，刚才有人告诉我渎者还不了解这种函 
数，不过再过几页就会看到了 D 不管怎么说， 
函数无处不在。 

Head First ; 这么说，函数的一个工作就是返回 
一个值，对吧？我的意思是说，如果我根本没 
有想要返回的值呢？ 

函数：很多函数会返囬值，但是函数并不一定非 
得返回值。很多函数只是做一些 工怍， 比如更 
新 DOM , 然后直接返同，而不返回值，这也没 
问题 D 

Head First : 那么在这些函数里就不需要 return 语 
句了吧？ 


Head First : 嗯，关于命名函数再说两句吧，我 
听说如果你不想命名 f 也可以不命名。 

函数 ：嘿，先别太深奥，把读者吓着了。等他们 
对我了解多点了再来讨论这个话题怎么样？ 


Head First : 你可别忘了， 
函数:下而我们来谈谈…… 


函数：说得对。 
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行参! 实参 




场 Li ? 夕 





不，它们完全不同 

定义一个函数时，可以定义它有一个或多个行参。 


这 f 裁们定 义:? 3个行 

J 4 \ 

function cook (degrees, mode , duration) 
// your cede here 


调用一个函数时，要提供 实参: 


cook(425.0, "baka 1 % 45); 



ii 些 I 式参。 { if 有 3 个佘参 ：一个 
洁电. 數. —个睿 和_个§数。 



cook (350.0 r ■卞 broil' 10); 


所以，你只需要 定义次 行参，但是调用函数时可以提供很多 


不同的实参 a 


仿芍鈦含療奇祕盔现，居然坪么多人_浚有 
搞愫 ci 一至。磬丰 f 部汊铕？，鰣 W 


f 釦果 伤在 约 it 卷利过不同的 m 现在在戊 
知违迮碥的理錡■么，”… D 


定大岛数时楛定衧參，摘用|& 
数时按倂隽# 0 
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-数剖析 ___ I 

既然你已经知道如何定义和调用一个函数，下面來确保真正掌握这个语法。 
以下是函数解剖之后的各个 部分： 



赛4以共铥孝 
■’ fuvUjtUl ‘孖決 


砑 €你的函數名。 


叶 aUw iSilM.A t] ^ I 

-吋姑如结束 ■)， 趄咢，釦 ()/ 


function addScore 


level 


fi t % 暑 o 个或多个用 it 号分降 
的行夺， ii 杳 f 今夸故在今轉 

//\ 

— I 


score 


var bonus = level * score * .1, 


return score + bonus, 


盈數体钕4并 个走 轉咢 = 笆 
含一租洚句（如仿常角的那# 

适匀） s 


迖甚函數钵的鸽耒 
大括考 a 


遂 | 盘可以色倉一个有 KCtwm 兵该 
幸的语句，不过这差 刁洼的，没 
严格龙求。 


r 找匀色含一个表3式，它含 
瑀用 3 个基 .数的鸽杲冱 ©4 


1^1* 为什么形参名前面没有 var 呢？ 
行参就是一个新变鱼，是吧？ 

答:实际上就是这样。函数会为你 
完成实例化定量的全部工作，所以你 
不需要在行参名前面加 var 关鍵字 。 

1^* 函数名有哪些规则？ 

☆ 

貫- 对為敫命名的规則与变 f 命名 
规则是一样的 



问： 我向函数传递了一个变置一 
如果在函数中改变了相应行参的值， 
会不会也改变原来的变置？ 

答:不会，传递一个基本类型值时, 
它会复制到行参^我们把这称为 61 传 
值”（桉值传 递）， 所以，如果在函 
数体中改变 f 什参的值，对原来的实 
参值没有任何影响，不过传遂軚组或 
对象是个例外，稍后就会介绍 t 


答: 你只能改变全局变量的值（也 
就是在為数之外定义的变量)，或者 
T 以改变你在函数中显式定义的变量 t 
稍后我们就会更详細地讨论这个内宕， 


R; 


如杲一个函数没有 return 语句， 
它会返回什么？ 


答： 如果没有一个 return 语句，这样 
的為数会返回 unde fine 


问：那么， 我该怎么在函数中改变_ 
个值呢？ 
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关于行参矿练习 



en your pencil 




—, 


你已经了解了函数，也知道了向行参传递实参，利用你现有的知识分 
析下面的代码 a 跟踪这个代码之后,在下面写出各个变量的值。学习 
后面的内容之前，对照本章最后的筈案看你做得对不对。 



function dogsAge {age) 
return age * 7; 


var myDog^Age = dogsAge{4); 


function rectangleArea(width f height) { 
var area = width * height; 
return area; 

} 

var rectArea = rectangleArea {3, 4>; 

function addUp (numArray} { 
var total = 0; 

for (var i = 0; i < numArray. length; i++) { 

total += numArray[±]; 

} 

return total; 

var theTotal = addUp([l, 5, 3 r 9JK' 

function getAvatarfpoints)( 
var avatarv 
if (points < 100) { 
avatar - ” Mouse% 

} else if (points > 100 £& points < 1000} { 

avatar = n Cat T, ; 

J else { 

avatar = "Ape"; 

} 

return avatar; 

} 

var myAvatar = getAvatar (3S5); 



在写出各个 

i f £ ****** 


myDogaAge = 
r^ctArea ® ..... 


theTotal = 


myAvatar = 


122 












JavaSc ： i 1 pt 函数对象 





M 部变 f 和金爲変 i 

1 解 g 别或风险 


乂 变量用 


我们 t 養谈埂你的 
变董麻法.“… 






iil 


:祕 :. 






你已经知道，可以在脚本中的任何地方使用 var 关键字 
和一个变量名声明一个变量： 

li 喳展含易变 I ， 叫存 
var avatar; fe~ 你的 疼中的 

var levelThreshold = 1000; (4 托地方（为闷。 


另外你也 兕过， 还可以在一个函数内 
部声明变 M : 


扣舁—个奕量在 


function getScare(points} { 
var score; 



po'l^ts r sgo re 和 L 窆泰部 
ft 逐數内部声欢。 


for (var i - 0; i < levelThreshold / i++) 
//code here 


return score; 



1 


f . ©#只奄丞盘的 I ? 
易都知述这吵变 f & 


即该我们在矗數中 f 逆用？ UveLlJirishi ? H 洽 
(5 基一个 f 要変董，©鈞它存矗激外笋 


薛数外声明，适 

知 弟在备 数内飾 
P 明 ,它韌是 


不过，这有什么关系？变量就是变量，不是吗？嗯，是 
这 样的， 在哪里卢明变量将会确定这 个变量 对代码中其 
他部分的可见性，而且了如果你了解这两种变虽如何投 
作，这将有助 T 你以后编写更可维护的代码（当然，也 
能帮助你更好地理解别人写的代 码）。 
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局部和全局怍用 4 

3藓爲鄯変董和全爲变量的作®域 

在哪里定义变優将确定它们的作用域。也就是说，哪里定义以及哪里未定义，哪里 
对代码可见以及哪里不可见 D 卜面来 看一个例子，其中间时包含了局部和全局作用 
域变量。要记住，函数外定义的变量是全局作用域变兌，而函数内部定义的变量是 
局部作用域 变璧： 

个变蓍# 盈含局 0用域蛮 
这说 它们在以下辦有 



0■■〜 



令、 
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变 I 的■短省一生 

如果你是一平变最，你得努力工 m， 而 s 你的 ■ 
生命：可能很短軺。也就是说 。 除非你是-个全 
局变钣，不迚即便是全風变生命 HJi 嚴有期 
限 ftth 但是到底是什么决定了变量的寿命呢？ 
可 a 这樺柬 考虑： 



只要页面存在，全局变量就活着,全厨变 m 从 

其 JavaScrtipt 加载到页面开始有:生命^不过，一 
丑这个页®不.&了，全局变的牛命也到了尽 
央^眼使你重新加载同样的既証，所有全局变 - 
量经被破坏，会在.親加载的■贞 尚中潘新台 L 

建。 - 

局部变置通常在函数结来时就满 m 部变 ^ r ' ， ㊣ 与还_一些其级 的方;去 
氣在函脇-次_时创建^一直__数 禾 ㈣㈣ 不 
匾问 -( 返_褂一个值或.者不带值返趿也就是 ^ ~_ 

说 t 冲以先■得到局部变堂的值，在这些变置进 - _ 

人大阪之前从函数将它懈返回。 


这么说，是不是根本无法从觅面逃走？如果是 
一个局部变量，你的生命会 像呉花 一现，转瞬 
即逝， 所》如果你•足够幸运，是个全局变藍，只 
要挪览器没發歌新加载说面，你就能好奸活若。 


不过 必须有 办法逃离页面〖我奸-定能想至 [ f 办 
法卜对不对？ 一\ 

芎以杳枣滅们的冰砂尽噼—费/ 

的矮栽们 t 帮 咏麟 ii 凑句化 L 

员 赛肘新 『 
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遮蔽 ： V 


如*我托一令舄部 St 命 
名成乌一令 B 有的全屄变 
1辟€, 会 Z 么轉珉? 


苒鑷 


4 

令 

心,…#!! 

银，蠓 79 ^^ 

七 、參 

♦往鄱承參 




'•鲁 

1 


4 ' ^wn 

Al 





你会“遮蔽”这个全局变量 a 

我的意思是：假设你有一个全局变量 b e anCounter , 

然后声明了一个函数，如下: 

var beanCount,er = 10; 

戟 fH 奄一 个含易 J -f 




function getNumberQfltema (ordertiype 
var beanCoun'ter = 0; 
if (ordertype =- "order")( 

// do some stuff with beanCaniiter.. 
J 


和 _ 个晏#变簀 


return beancounter ； 


} 


这样一来，函数中 beanCounteir 的所有引用都会指向 
局部变量，而不是全局变量。所以我们说全局变量被 
挡在局部变量的阴影里（换句话说，我们无法看到全 
局变量，因为局部变量挡在前面 ） D 

T 〜 i 惫含 4 t 署和易部变蚩徇亞匕 
、、 间沒 有仔俜 男砀：釦粟琏 i 龙中_ 

t 会 ㈣ 1 个 ^ 

最棘以的变蜃 * 
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tJiere|Ore n9 

Dumb Questions 


问: 


拿握所有这些局部变董和全局变 a 的 
作用域很让人糊涂，那么为什么不都用全局 
变 m 呢？我就总是这么做， 


答 


如粟运是 — 本浞 n 細泣年 
鹐杈 的丰，的我们还贪鏟 
续的硷 a 个生验.不过本 

HTML^STVcgrai^mXi ^》 ， W 【均 • 

M 澧议汸鑣譴砑旯这个主砝 ， 1 
来祐进伤的代砝的項 If 


如果你写的代码很复杂，或者需要在很 
长一段时间之后维护，你就确实应当好好看一 
看如何管理变量 。 如果你过分热衷于创建全 
局变量，将很难跟踪到变量在哪置使用 （以 
及在哪里对变量值做出了修改）.而这可能 
会导致有 bug 的代码。与則人合作编写代碼时， 
或者使用了第三方库时，这一点会更为重要 
(不过，如果这些库编写得 很圩， 則它们应该 
会有合理的结构来避免这些问题） a 


所以说，可以在合适的地方使用全局变 
不过一定要追度，另外要尽可能使用局部变 
量^等你对 JavaScript 有了更多经给 s 就能研 
究另外一垮代码建构枝术，使代码更可维护， 


我的页面中有全局变量，不过我还加 
载了其他 JavaScript 文件 s 逸些文件会有不 
同的全局变堡集吗？ 


答 


• 只有一个全局作用域 t 所以你加载的各 
个丈件会看到同样的一组变1 (并在相同的 
空间釗建全局变量），正因如此，一定要当 
心变量的使用，以避免冲突(还要尽可能减 
少或消除全局变量）。 

我见过有些代码中，向一个新变置名陚 
值时并没有使用 v 如关键字.这是怎么回事？ 


答 


嗯，这是可以的，向一个还没有声明 
的定量名賦值时，会把它当做一个新的全局 
变量 a 所以要当心，如果在一个函数内部这 
样做，你就会创建一个全局变量，提醒一下， 


问: 


使用函数前需要先定义吗？或者它能 
出现在脚本的任何位私上吗？ 


答: 


函数声明可以出现在脚本中的任何位 
K ,只要你愿意，完全可以在使用朵&的位 
置下面声明这个函数 s 这是可以的，因为首 
先你要加载页面，測览器会解析 M 面中（或 
外部文件中）的所有 JavaScript . 开始执行代 
码前它会看到这个函数声明，还可以把全局 
变量声明放在脚本中的任何地方，尽管我们 
建议所有全局变 f 都在文件的最前面声明， 
这样更容易找到„ 

使用多个外部 JavaScript 文件时有一点要记住， 
如果不同文件中有两个同名的函数，将使用 
浏览器最后看到的那个函数 a 


问： 


好像所有人都在抱怨 JavaScript 中滥用 
全局变置 t 为什么？是这个语言设计得不好？ 
还是人们不知遒他们在做什么？或者是其他 
什么原因？我们能谈谈吗？ 


答： 


JavaScript 中经常汲用全局变量其中 
部分原 JS 是因为这祌语言太.容易上手了，让 
人很容易就开始编写代码是一件好事，因为 
JavaScript 对结构没有做太多要求 t 也没有给 
你增加太大负担，不好的一点是，如果这样 
随意地编写正式代码，过很长时间后必项进 
行修改和维护（这往往意味着需要调埜所有 
Web 页面） □ T 以这么讲， JavaScript 是一个 
强大的语言，包括诸如对象等很多特性，可 
以利用这些特性采用一种糢块化的方式组织 
代码。很多书专 n 讨论这个主题，这一章系 
二部分（再过几页> 会让你对对象有点认识- 


我们并不推荐这种编码做法，不仅是因为读 
代码时可能带来混清 T 而1有些人认为以后 
JavaScript 实现可能会改变这种行为（这就有 
可能破坏你的代码）^ 
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函数作为沾 

嚙，我们揸剡过函数也1值蚂？ 

OK ， 你用变量存储过数值、布尔值、串、数组， 〖者如 此类，不过我们提 
到过违可以把一个函数赋给变董吗？下面来看看： 





function addOne (num) 
return nuaa + 1; 




左义一个阇 ¥ 的函數 _ 让它的 参數 加 i . 


松枭钱试 l . 蕺们 科值用 ti 个函數名 


a ddov^t. dd O tve 蛾 $ —个 H 董 pLi^Dt^ 。 

var plusOne = addOne; 

PT_〖i 意这 f 没有递过 W 该用遂敖，我们只 4 
值用了蕋衆名 t 


var result = plusOne(l); 





这个谋用之扁. KCSLiLt ^ f ^ 


■ ptwJSOl ^ 暖片一 个逐數 
个整教参蛊 1 E 


坏 以芍以 i 霉用它 4 M 供一 


嗯，之前我们不仅没有提到函数的这个小细节，而且在剖析函数时还有 
点保留，没有仝盘告诉你.实际匕甚至可以不指定函数名。这到底是 
什么意思？为什么你会想要这样一个东西呢？首先，来看看如何创建一 
个没有函数名的函数； 


function ( num ) { 々 * 名.…■.嗎.“ ■“那 4 怎 么用达个蚤盘喊？ 


return num 



同辑的 t ( i - 次拖它後 
诠一个変 


var f = function H hum ) 
return num 4- 

} 


然后值用 ( i 个 4 f 
t 采 il 用凾教 d 


var result = f(l)r 
aler t (resul-t) - f 



a 个谈用 z 运, 


rflSKtt 
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来看下面的代码：你认为会发生什么？ 


去在该 好瑾铒 一#3 …… 


var element = document,getElem©ntById ( ,T button M ); 
element.onclick = function 0 { 

alert:{ Tl clicked! TI ); 卜如果你还沒 有切作 ？ 稱也不用托 T 相 

t 忌杖含介链 . 


} 


Sr 麒 



将&数作为值能够傲什么? 


那么重点是什么？这有什么用？嗯，能够将函数陚给一个变 M 并不是太重要，我们只 
是惜此向你展示函数实标上是一个偵-而且你知道可以把值存储在变量或数组中，可 
以将值作为参数传递到函数，或者很快就会 看到， 还可以把值陚给对象的属性。不过, 
我们不打算继续讨论匿名函数多么有用，将函数作为值有很多用法，下面来看其中一 
种方法，现在开始有点意思了： 

— 个逋辈 tt > 

function initQ { 

alert ( fl you rule!"); & 笔将我 iH 1 泛數跋备 

window.onload = init; 电也 我们坍备盘用敞一个值！ 


或者甚至还能更有意思 一些, 




vlndow. onload — functionO 
alert ("you rule! ,T ); 


如梁 S 不太 ■ 戈，赵 ■ ■也不 
用恕心，猓桷犹含介绍这个内客。 


44 , 4 不基更薄单 
也 更芍读 1? 


你可能已经发现，除了打包代码重用之外，函数还可以做一些有用的事情。为了 
让你更好地了解如何充分利用函数，下面来学习对象,了解对象在 JavaScript 中的 
位置，然后把函数和对象结合起来， 
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介绍对象前的动员 








挪 


•任麒承 




作者们7嗜7你好，我嚴兵 HTML 5 
妾的朗个女孩，还铊得我喝7我蓐 
知道，闭有这#和 ffTMlS 到庙布 f 十 

么兵系？ 


嗯，我想我们已经讲过 不过看起来我们已 

经载你绕了半个城了，里程表一直在跑（原本 
可以把你一直带到城中心的 ） t 不过我们突然 
想起来下一章要开始深人讨论结合 HTML5 使用 
的 API。 而 Jl, 这需要你真正了解函数、对象 
和艽他一些相关的主题 。 

所以，坚持一下6实际上你已经走了一半了！ 
另外，别忘 r ，从这一章开始，你会从一个脚 
本开发人员成长为程序员 T 从只馑得 HTML/ 
CSS 变得能够构建虑正的应用。 



I 戏们0经祛到这啗，达芍能迳能让你样 
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布 人谈到“对象”！ 


嗯，我最喜欢讨论这个话题了！对象可以让你的 hvaScript 编程技能上升 
到更高层次。对象是管理复杂代码、理解 DOM、 组织数据的关键，甚至 
也是包装 HTML5 JavaScript API 的基本方法（这还只是 :列出 IT 对象的儿个 
用途而已）。也就是说，对象是一个很难的内容，是吗？哈！我们就要 
深人进来了，很快你就会用到对象。 


告诉你一个 JavaScript 对象的 秘密： 它们实际上就是一个属性集合，举个 


例子，比如1 一只狗。狗是有 M 性的: 



搀部有一铊它们喜饮的淦功. 
比釦散诔和叼球。 




辦节 狗郄有 f f , 


还奄 甚种。 

巧一个溫含甚种。 
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对象和屬性 

考虑厲性…… 

当然 Fido 肯定承认除了一些厲性外，它还有很多其他方面,不过对于这 
个例子，我们需要在软件中掌控的只是这些内容。下面按 javaScript 数据 
类型来考虑这些 属性： 











任麒 


芍以讀裁们将角一 
个对象表孕一只狗， 



和一铂屣找 . 



name: Tido rt 


/有一#搴表矛狗的名孝 
和品种。 


weight: 40 七 


breed: "Mixed' 



荀一个#遨表矛 1 著 


loves ： ["WQlk5__, "fetching baJJs K ] 


另外只拘的 mA 
-个$想铂中， S 中忽括 o 个残多个无 
i r 这 f fl 山) 荀茶个爱 


如何用 JavaScript #! 建对象 

已经有了一个包含一些属性的对象 (j 如何使用 JavaScript 创建这个对 
象呢？方法如下： 


塵 把这个的象蛾铪变 







var fido = { 

name: ” Fido” f 
weight: A0 r 
breed: ’’Mixed 1 ，, 
loves; [’ 【 walks ”， 

}； 


分睬，不 t 分咢 



C | 个的拿有 4 个屬忖， 

3 意 weight ^ f £ 4 -个數 40 
fcmC « (扣!是串。 

'fetching balls’ 1 ] 

电熬迳奄一个數维來侈存狗 
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V 、 




@用"点” 42 ：法钫 f ^ u 对系属性 

^ r - 

i 产 ( fido^eight > 25 ) f 
alert{ ,T WDOE t, >； 

} else f ~ 

alertf " yip ” J ; 


J ~ 


咖"•僉鼷奋 

值用蚌象— & 属性名 ! 

fido/weight 《、 

. . 辑 H — 

达 n 时•象…个尿 作名 



乘沒词这个属性的 d 


_ 便 ffl —介輋銶含 U 论法达阅禺性 ; 

6T 

var breed = fido[ lt breed ,T l ; 
if (br««d == "roixed^) { 
a lert( n Beat in s how^):,; 

> 


❻ 


濩麻的幕用 §1 导 
中为 r€r ® 的廣作 名來 
饫闲这个屨性的 d 


a ■ I 对象 


现存属往名茶乜僅 JT 

u 。 ^ 

fido [ fr weight ,f ] 


羼忖各用⑷考 


玟交属性的值: 




麵起 .： 

戧们发现在 ci 荈神记汰 
中，東记法 Eg 读。 


磕変样如的 ff 


fido.weight = 2rl; 
fido, breed = '^ChaXIa/Great Dane mix 11 ; 
fido, loves .push {^hewing bones"); 一 


它 . 的吳神 • 


再命洽的 Uv 找數通馆加一令私尤秦 


£ 跬軺一个釦 ; if 届 
入數茲 I 末扈 : 


© 校#对象蛑所有_展性 

var prop; 
for (prop- in fxdo) 




枝輋钛 4 宠含 对迄妗象的辦有 属性 □ 



s 龙技麥屬怙 + 我 fn 使 wj — 个仔 “㈣ 轉坏。 


备次牦钚迭代蚋. 

下一个屬乜名的相应穿 d 


arlertpFido- has a " 十 prop -h-" prop&rty "J; 
if (prop = r, name |r ) (： 

alertC^Thxs is 11 +■ fido [prop}); ^ f^j t-] it si 闷这个屢 fi 的 (j£ , 


l (i 意屬伐时袖庳盈鉍螓的 ^隊不 
能钵筠 > 个辞定 • 的艰序。 
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对象能做什么 




龟 i 






0 处理对 ft 的数姐： 

~ 、 在 iif , 我们济( I 如的 Lov 这數 

var likes = fido.loves; 通妖至变 |Ul 

var like&String - ” Fido llkea ' T ； 

芍以神 £7,41 瑾 Ufecs 致租，釗遠 - ■个 
, 與中忽 含和如的所有 

鼉 I 

alert(likesStringJ ; f _ 巧 V •用运个摩鈒访砝矛 „ 



for (var i ^ 0; i < likes,length; i++) 
likesString += T，T， + likes[i]^ < 




银 




挪 


每任覷承參 




点搡作符。 

利用点操作符 (.) 可以访问一个对象的属性 8 —般来讲，这种记法 
比[ " string " 】记法更易读！ 

• fido . weight 是 fido 的重量 D 

• fi < io , breed 是 fido 的品种 你 

• fido.name 是 fido 的名字。 

• fido . loves 是一个数组，其中包含 fido 的爱好^ 


(!) 蚤数伪入一个对象 


function bark (dog)( 

if (dog.weight > 2S) { 
alort("«OOF PT ); 

J else { 

alert ("yip"); 


命毐激涔入—个 的象, 
軚洚 馎入萁姑变 耆—样。 


存凾數中.可以正業被访同这 
个圬寒的屢性.去然屦 僅用朽 
参名作衿时象 4 


bark (f ido ) 


哉 巧实參 fl 入 
这个益教宠 J ® — 个 deg 时象。 
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七令任 郸承參 



是的，仟何时刻都可以增加或删除属性。 

要向一个对象增加属性，只需要为一个新属性赋一个值，如下 
所示： 

fido,age = 5; 

从此刻幵始， fido 就有了 -个新属性！ age 。 

类似地，可以用 delete 关键字删除仟何属性， 如下: 

delete Eido.age; 


删除一个属性时，井不只是删除这个属性的值*你会删除厲性 
本身。 实 际上， 如果删除丁 fido . age 之后再使用这个属性，会 
计算光 unde f ined 0 

如果属性成功删除 （或 者如果你要删除一个不存在的属性，也 
可能你想删除的根本不是一个对象的属 性〉， delete 表达式会返 
回 mie D 
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对象作为智数 

谈谈尚蚤数传入对象 

我们已经谈到过如何将#数传递到函数 D 实参会按值传入，所以如果传递一个 
整数I相应的函数行 参会得 到这个整数值的一个副本，并在函数中使用^对象 
也是如此》不过，首先还需要进一步分折为变最陚一个对象时变量中包含什么， 
才能真正了解传递对象的含义。 



将一个对象赋至变量时，这个变董会包含这个对象的一个引用，而不是对象本 
身。 可以把引用想成是对象的一个指针 4 


f ido ^ 



将象曠个变蓍的，含彔变 I 
接供 这个的 象的？1用 p "64T- '® 
f5 H 为象本身。 



nome ： "Fido_ 


weight ： 40 


breed ： u Mixed 1 


loves: Pwafks' M fete King balls 1 '] 


所以，调用一个函数并传人一个对象时，实际上只传递了对象引用 
对象本身，而只是它的一个 M 指针” u 这个引用的副本会传递到行参，它指 
向原来的对象。 


if 用 barleft ^ 妁金参 
的. 我们含得 fW 叫的象幻用的 
一个 I 1 )本。 




function bark (dog) 
… code here … 



嗯.这些到底是什么意思？改变对象的一个属性时，你修改的是原对象 
的属性,而不是副本 T 所以不仅可以在函数内部看到对对象的所有改变, 
而且在函数外一样能看到所有改变。下面一步_步跟踪一个例子，这里 
对 dog 使用一个 lose Weight: 函数…… 
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ihFido 节當…… 

下面来看把 fido 传人 loseWeight 并改变 dog.weight 属性会发生什么 e 


① 


我们定义 J 一个对象 fido , #粑迖今对 felt 入一个杂數 
(oseWelohto 





是一个 的象的 A 用, a^z 
明的象#不故奋 fldotft , 
只龙由 f 如变 I 壶令^个的篥 
高 6 。 



name ： . Fido ’ 
weight! 48 
breed ： ■ Mbed ’ 

Joves; [’walks' 'fetching bdb - ] 


fido . weight = 48 
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介绍 web 镇 dnema app 


NOW SHOWING AT THE WEBVILLE CINEMA 




^Forbidden Planet ” ， 5:00 pm 和 9:00 pm 放映 * 所属 
r 类别为“科幻片" 》 等级为5星，^ 

I 黄昶在下 一资， 不 as 咸 (I 个练习 \ 龙含巧以螬加® t ) 3善政的 

前羌不龙昜 If 。 虑的，一定1漱到 ， | S j 4 f 


Web 镇影院希望为他们的 JavaScript AP 彳提供帮助，我 
们从简单的开始，先为他们设计 movie 对象。我们需 
要两个 movie 对象，分别包含影片名.类别、影片等级 
星） 和一组放映时间。在这里大致画出你的 movie 
对象设计（可以使用前面的 dog 对象作为模板 ） 。下面 
是一些示例数据，可以用来填充你的对象。 


"Plan 9 from Outer Space " , 3:00 pm , 7:00 pm 和 
11:00 pm 分别放映一场 * 所属类别为“恐怖片"，等 
级为2星。 


存 iif 设錡饬的的象 
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Jay 与 Script 函数对象 






NOW SHOWING AT THE WEB¥ILLE ONEHA—^ 


： 


如倚创建你 tom ode 对象:?… 
下面是我们的 答案； 


SOLUTION 



巧寒 f ' - _ 

泰馮郝 IW 4, 




有竹祕，（叫鐵 ― . 

_ - ■ ' - • ■ - I ■■画 _1_ ■ ■— ■-■ - _ . J ■ _ J. . _ 

. _ :: ■: ; . vr - T - - ：^：;.^： '；^ : ；'; : V ■ 

fairmovialr = { : 〒:亡 一 . J4 名和幾 

title L. "Plan S^from Outer SpaceH 

.. ^gmnrm: - ,T CultJ Claa aLc^// : : IiT: 一 ^ — Jf ^ "i 二二个教 ？: 

_____ '_- ■ .-_ ■■’■■ ■_:• ::■!!:._■_■■;■• ■_-■■， .； -1-1 '' 

rating; 5> ~ — 


jbe-^UhL 

L 研 

j£h - 




■…， ' showtimes:'' [V3 :OOpm H jr , 77: OOpmV ， ’H00pm"】.：..：■■ — 





受城 ㈡ ^-(shaivt ； m^s)_ 署 ” 个萃迫 ，: 


■•■’■■.■ "i = ■ ■-.. 


var movie2 = { 

__ • _ ; _ 

t±tl& : . "Forbidden Planet 1 
genre i -Classic Sci-fi 11 ," 

… • - • ■ . ■^■― ■ * - _ i 

.■- • • ^ ....... ^ .... ■ 

■, B pa ' ~ f ■ 

ratings 5 f 


nujvto 也苟斗个 渾忮：片务， 

「政|_]^.- 等 释和:埤 碘的 .用^ 



廬用.( I 考.分陲羼作 


dhcMttimes: 卜弓 ： 00pW~, "SfOOpm'^] 




' ^ 这 f 使用矣⑽同样的 屬啓名、 

- ■- ... ：;: - 
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实现 下一次放睐 


次放碘时间 1 


对于如何结合对象和函数我们已经有点认识了 D 下面更迸一步，来编写 
一些代码指出影片的下一次放映时间 P 这个函数取一个影片作为参数, 
返回1个串，其中包含根据你的当前时间确定的下一次放映时间。 


以下 I 我们的靶函 S . 它狀_个 
Wrtovie 的象 a 


function getKext Showing (me vie j { 
var now = new Date (). (); 



我 1 H it avaScrL ^ t^^atc 的 象软驭劣簕的闳& 
先不用 担心； i 个的.象的 麵节， °ff 和！它能 
达柏 时闻(輩径为毫秒） 。 


现 在值用 的數通 sh £> wtlmi£ p 
这代处理备个钕嘁 ㈣ 问。 


for (var i = 0; i < movie.ahowtimes.length; i-H-) { 

var showtime = getTimeFromS tiring (movie. show tunes [i]) 
if {(showtime - now) > 0) { 

return "H^xt showing of lf + movie.title + 


±s 


-圬 f 荔个放纳 ㈣ 间，得 f 1 ) 和左的的 
闸免（掣偌於毫 #) ,钱后比较。 

movie , showtime s [i] ; 


} 


return null ； 


K ： 如菜的 间这没 就 & 下一攻故诫的间, 




■fe 果沒荀放确锘; j ： 
妖达 ® kUiLL c . 


fti nctrion ge1:Ti.ineFroniS tri. ng (iiimQ String) 
var th^Time = new Da^eQ; 



var time = timeStrifig. match (/ (\d+) (? :: (\d\d)) ?\s* (p?) /); 
theTime, set Hour s { parselnt (time [1]) + <t±me[3] ? 12 : 0> }; 

j 

theTime.satKiimtea( parselnt(time[2]) 11 0 J; 

return theTime.qeti^ima { J; 


先不 M 拒 w 这个代砝.， (1奮使用 J 正則表达式 T 后刁 
㈣ 你金 f |_) 的。的现 4 来说，笱以光£戏僅角这 

个代茲！ 


_成品代碚 

下面给 出一 墊威溪代码 r 
它蚁一个$,格式类似 

个等鞾病蚱牟饴婷毫# 
的时闵。 


var nextShowing = getNextShoving (movie 1 ); 匕 
aler (ne x't Showing; 

next Showing ^ getNaxtShowing(movie2 )； 
alert (nextShowi ng >； 

A 的傲两辑的 it 理。 




规存货用这个蠱數， i 务用 QetNextsh ⑽ i 外^ 
待在 祛鏵中伎用 Ci 个函數迓 
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JavaScript 函数和对象 



如何仪串链奸…… 

在前面的代码中你注意到这个了吗? 

movie + showtrimes. length 



看起来这和我们以前看到的好像不-样。这实际上是一系列步骤的简写，原来我 
们需要用一系列步骤从 movie 对象得到 showtimes 数组的长度。 fiHfl 原本样 

写： 冇先孩 舣认 ( jwtbv^s 蛊遢 □ 


var ah ow'times Array — movie. showtime 3 ; 


var len = showtimesArray.length; 然后用自访同厲 fl c 

不过，把表达式串链在一起就可以一步 到位。 下面逐步分析这是如何 
做 到的： 


movie ■ showtimes , length 

CM I'J ❷它个 ❺數诏有一个屎性 

对象 C SVl£SWtLWA4S,^ 

也 ,这 差一个 


试一试 




输人上-页的代码，试着来运行。你会看到 getNextShowing 函数会根据传 
入的影片，确定它的下一次 放映时 间 a 完佥可以创建些你6己的新 movie 对 
象，运行试试看。我们就创建了一个新影片，在当地时间 12:30 pm 运行这个代 

码： 


var banzaiKovie = { 

title * "Buckaroo Banzai", 
genre: "Cult classic"', 
rating: 5, 

show times: ri.OOpm'% 5:00pm", 7:00pm "】 

1 

var nextShoving = getHextShiDwiiiglbanzaiMoviel / 
alert, {next Showing); 



mioL m / 

^ 扣脚抓 » « I^hzaI i. | (^ 


我们的代茲巧沒 节达约1 户代 
的廣 f :釦莱在最后 一* 故嘁 ㈣ 问 
之后达行这个 弒舍饵 ® 
巧以第二天爲试试 u © 
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对象< 方法 


对象也开认有行为 .. 

你不会认为对象只能存储数字1串和数组吧？对象是有生命的, 
它们还能做事倩 D 狗不会总坐在那里，它们会叫，会跑、会玩接 
东西， dog 对象也一样！根据这章学到的知识，你现在完全可 
以为对象增加行为了„下面来说明如何 实现： 


var fido = { 

n&me: T, Fido n , 
weight: 40, 
breed ： N Kixed n f 


loves: [” walks", TT fetching balls"} 
bark: function () { 

al«rt("Waof woof! 1 ); ^ 薄 d 样态#命时象 

t ff 扣一个备數， 


我们 不说"对象 中的蚤盘"， 
无含说 这基一个方法 。它们是 
一辉的，不过.科苟人郄#爿象 
遂叛為方法。. 


(主意. 我! TK€ 用了 i 名 
的 fcarte 属传、 


s 骑毒衫 

对募中有备 
数时，我伯 
旗洚个対焦 
有 — 个方法。 


要调用对象的一个方法，可以采用点记法使用对象名和方法，并 
提供所需的所有实参。 



fido,bark{) 


通过在対象1：调用方法，让对象嫩事作 
在 id f . 戰们调用 3 t 的加也方法/ 
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JavaScript 函数和对象 


爯设到 Web 镇影院 • 

既然你已经掌握了有关对象的更多知识，下面可以再回来改进我们的影 
院代码 D 我们已经编写了一个 getNextShowing 函数 r 它取一个 movie 
作为参数，不过可以把它创建为一个方法，使它成为 movie 对象的一部 
分。下面就来做这个工作： 

var movie! = { 

title: ^Plan 9 from Outer Space", 
genre ： T, Cult Classic 1 ^ 



rating: 5, 

showtimes ： [ ,T 3:0Qpm n , T ， 7:00pm", T ， ll:00pm ,r ], 

gahHex tShowi ng : function (aiovia) { 
var now * ne>t Date () ^getTinie {); 

I * ' ■ 7 .' ■> r •；■ • - • '•* iv » ..... 

for (var i = 0; i < movie. showtimes. length; i++> { 

- - ■ 

var showtxm* = g*tTimaFromString (movie. showtinw B li] >; 
if ({^howtiitiA " now) > 0) { 

return ,f H©xt shoving of n + mo vie. title + n is ■* +■ movie. shoirt.inu^ft [i ]； 

> 

1 

return null; 

} 

}； 




挹栽们的代砝放在 movUx 的象的一个方法 
中， 展性4碎郇 






不过我们知 a 这玎能不太对…… 

贫际上我们不能直 接把函 数放在这个对象中，因为 getNextShowing 要取 
一个 movie 参数，而我们真正想要的是像下面这样调用 getNextShowing : 

不应有参 fi , 栽们$疼知1#望 flf ) 蜱个 釤片的下—汝 

var next^Showing = moviel ■ get:Next:Show±ngU r 放讲的 [ 司，也狀这 .， 效备道 n^ovitL 的下 一 放味 ㈣ 间。 

那么，如何修正这个问题哫？必须去除 getNextShowir ^ 方法定义屮的行参， 

不过这样一来，就需要对代码中的所有 movie . showtirnes 引用做些处理，这 
是因为，一旦刪除了这个行参， moviel 不再作为一个 变圼存 在了，下面来看 

■■ ri ■ ■■ i fi 
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调函数为方法 


T ® 去轉 *H0vk 行参 .. 

我们已经删除了 movie 行参以及它的所有引用。这会得到下面的代码 




v&r movie 1 = { 

'tit-le : "Plan 9 from Outer Spaced 
genre: "Cult Classic", 


莪们突出屋 矛？下面的 i 化 


rating ： 5 , 

showtimes: ["3:00pm ， UOpm' ^ll^OOpm^], 

getJ^ex'tShoiring: function 0 { 

v&r now = ne：w Dat:eO .get:TxmeO; 


逯看起来襻合瑾 < 不过栽们霹至再(号如 
匕 考忠 m c ^ tshowLvt 0 ^ 法如托 (4 用属行 
showtUvtti …… 


….’義 d 用姿部交荖 （Showtbucs 不屋 
姿郝变 I) 和含居变 | (sJfliJwtUues 也不 
在全晏宠 |) a 咳 …… 


for {var i = 0; i < showtimea, length; i++) { 

var showtime * ge tTimeFromSt ring (show times ti]); 
if ((showtime - now) > 0) { 

return "Next showing of tp + titlo + " is " + fthowtin^a[i]; 


} 

return n^ill; 


^ r 注有一个 . y 嚷性 


); 


现在怎么办？ 

嗯，现在遇到难题了 t 我们要得到属性 Shc^times 和 title 的引用。通常情况下 T 在一个 
函数中我们会引用局部变置、全局变董或者函数的一个形参，不过 showtimes 和 title 是 
movie 1对象 的厲性 ，嗯，这可能也行……看起来 hvaScript 应该足够聪明，能发现这一点吧？ 

不，这是不行的。你町以自己试一试。 JwaScHpl 会告诉你 showtimes 和 title 变量是未定义的。 
怎么回事？ 

是这样的 t 这些变置是一+对象的属性，但是我们没有告诉 hvaScdpt 它是哪一个对象。你 
可以自言自语， w 嗯，显然我们是指这个 ( THIS ) 对象，就是这一个！这还有什么迷惑的 
呢？”不错，我们确实就是要得到这个对象的属性。实际上， JavaScript 中就有一个名为 this 
的关键字，你要通过它告诉 JavaScript 你是指目前所在的这个对象 e 

现在， 情况确实比原先看起来复杂一些了.稍后我们就会解决这个问题，不过，对于现在, 
我们先增加这个 this 关键宇， lh 代码运转起来。 
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JavaScript 函数 拍 对象 


增加 “ this ” 兵鍵字 

卜面在 每一处指定属性的地方增加 this, 告诉 hvaScript 我们希望得到这个 


对象中的属性： 

var movlel = { 

titla; T, Plan 9 from Outer Space 1 % 
genre: "Colt Classic'% 
rating ： 5, 

show times ： {' t 3i00pm'\ T, 7:00pm M , M ll:00pni ,t ] f 

ge^tNext Showing ： function (} { 

var now = new Date () b getTime {); 


任 騮承參 


这 f 存罢个 4忮 前 j 增加一个 thU 乒鍵 
vT 牦孑 a 们 sff 到趵象的引用: ■ 


for (var i - 0; i < this. show times, length; i++) { 

var showtime - getfimeFroictString (this. showtimas [i]); 
if ((showtime - now) > 0J { 

return T, Wext showing of f, + this,title + " is _ T + this.showtim^s[i]; 

} 

} 

return null; 

) 

h - 


试一试 “ this ” 



输人上向的代碼*并把 getNextShowing 函数增加到 movie2 对象（只需复制粘贴） a 
然后对之前的测试代码做 下面的 修改。 W 运行这个代码！我们得到下面的 结果： 



var next Showing = movie 1. getNextShowlng^); 
alert ( nextShowing ); 


nextShowing = movie2 .^etHext-Showing Q ; 
alert (nsxtShowing); 


泣意， 现存残们存这个的搴 i ： 调用 
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哈，好眼力。 

如果你发现我们把 getNext Showing 复制到多 
个 mo vie 对象时是在复制代码，说明你很敏锐, 
很有 直觉。 “面向对象 M 编程的一大目标就是 
最大化代码重用。在这里我们没有重用任何代 
码，实际上，我们创建的每个对象都是-次性 
的，而且我们的 mo vie 对象按约定（另外由于 
复制和粘贴） MU 好是一样的。这不仅是浪费， 
还很容易出错。 

还有一种更好的办法，可以使用一个构造函数。 
什么是构造函数？它就是一个特殊的函数，接 
下来我们就会写这样一个函数，它能为我们创 
建对象，井让所有对象都一样。可以把它想象 
成-个小工厂 T 根据你希望的属性值设置对象， 
然后给你奉上一个漂亮的新对象，其中包含所 
有正确的属性和方法。 

下面来创建一个构造函数…… 


代码重用和方法 


广％ 


最起来我们在耋复代码 t —畫在复 
制轄貼恥 tNextShowlng 方法 a 布进 
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如何劊建构造凾数 

下而为狗建立一个构造函数。我们已经知道希望有怎样的 dog 对象： 
它们有名宇、品种 和重置 属性，另外还有一个畎叫方法。所以构造 
函数的工作就是得到这些属性值作为 参数， 然后返回一个 u 活灵活 
现”时刻准备呋叫的 do g 对象代码如下： 




JavaScript 函数 fh 对象 




a ®! 






构 it 函盘希 i 去矣常規各啟猓类 
九不过根戏釣龛- 命名 这个函 

A 


构邊函數的 fj 参 M 我们 4 望的的象厲伐徭 


f 作名和 H 参 
名不# 求相同， 
不迮宓们 ii 常 

a 

也个约定 s 




function Dog{name, breed, weight) 
this, name = nam^; 
this.breed = breed; 
this.weight = weight; 
this ■ bark = function () { 
if (this.weight > 25) 



4( if . 的象 属往初始体衿代入 

构逢关数的 


可以夺 构送的 时隳中 色含 b ar 々 古:法 特 
呶属乸初始化#-个函數 ^ 这类似 
今 C 前的漱(在， 


alect(this.name + T， says Woof !">； 

else { —--- — 

alert (this, name + __ says Yipf^) ■ 


方法中 fi 值用 M thU.wei0ht - 
和來推#的象中的 
m . a 島箱而一样。 


)； 


ii 鱼 ii 个诘沾島#象碡沭有蚋不钧。这些1邊匀. 
角以 #J 用一个 V "玆秉备译旬，就 嚷我们 d 常 
在基數中的舦法一缉。 


下而再把整个过程整理 一遍， 确保我们已经拿握了有关内容。 Dog 是 
-个构造函数，它取一组实参 T 这正是我们希望的属性初始值：名字、 
品种和重 M, —旦有了这些值，再使用 this 关键字为属性赋值。它 
还定义了 bark 方法。所有这些工作的结果是什么？ Dog 构造函数会返 
回一个新对象。下而来看如何具体使用构造函数。 
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使用 






用,」 


var fido = new Dog( tl Fido > % n Mxxed T, , 38); 


var tiny = new Dog( lT Tiny'% ”Chawalla，_, 8); 

var Clifford = new Dog( ,T Clifford M # ,, Bloodhoimd , % 65); 


fido-bark(); 
tiny.bark(J; 
Clifford, kark{) 


得的 的象，鱿 9 以 il 用它们 


下面阿来回顾这里发生了 什么： 我们创建了 3个小同的 Dog 
对象，每个对象都有自己的属性，这里结合前面创建的 Dog 
构造函数还使 ffl Tnew 关键宇，构造函数返回一个 Dog 对象， 
并用我们传人的实参定制 a 

接下来，对每个对象调用 bark 方法，注意所有狗都共享同 
一个 bark 方法 T 紐个狗吠叫时， this 指向做出_用的那个 
dog 对象。所以如果对 fido 调用 bar it 方法，那么，在 bark 方 
法中， this 就设置为 fido 对象。下面将更深人地分析这是如 
何做到的。 


我们釗達3 3 个不同的加 0 时 

攀■分到 f # 入不同 的貪参来定制 
各 个狗。 


0 


Httpr//tocftlhoit 


-…， / 


- •，- 


3 


—^_ _ . 


htT|X//focailhost 

T^lny Vigj 


涵 


⑩ 


Oiftand! W&o4\ 



现在使用我们的构造&数 


既然构建 f 我扪的 工厂，现在则可以用它来创违一些狗。还有一点没 
有告 W 你，要用一种特殊的方式调用构造函数，在调用前面加上关键 
宇 new 卜面给出几个例子： 



狗这 

0:辛 一 P 

一禮 
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到底 是怎么 锣事？ 

只要在一个方法代码中放入 this ， 就会把它解释为调用这个方法的对象的 
一个引用。所以，如果调用 fido.bark ， 则 this 会引用 fidcu 或者,如果在 
Dog 对象 tiny 上调用这个方法，那么在这个方法中 this 就会引用 tiny D this 
怎么知道它表示哪个对象呢？下而就来看一看： 



在蓐痕 

鄱承 


假设饵一个 ^og 对象陚至 fido: 


fido = new Dog( T Tido M , 1 'Mixed 1 V 38); 



妒的圬象，角我们奉管 
的 m 性 a 索例优。 


@ 在 fWo 上锔用 barktl: 



name: "Ffdo - 


breed ： -Mixed" 


weight ： 38 


bark ： funetionQ ( tT .) 


fido.bark (} 


this 



个勿蓽 iff 用茗个古 4 

本 Vx: 於纖 i 馈 


知违名$应茂差 " Hdo ^ s 


® 純刪娜祕， ㈣㈣ 刪 % 


f ldo,bark() 


tiny, bark () 



thia 

nflmer 'Fido"* 
breed ； 
weight ： 3B 

bark ： functionQ { .,.} 



this 

rwne^ 'Tiny" 

breed: '"Chawalla" 

weight] 8 

bark ： f unctfon()(. 


Clifford. b^rk() 

this 

■ flame! 一 C!ifforcT 

breed ： H Blaadhpund <1 

weight ： 65 
bark ： functionQ { 4 , + } 
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movie 构造函数 



代碚糍贴 




冰箱上有一个能正常工作的 Movie 构造函数，不过有些磁贴掉到地 
上了。你能帮忙把它整理好吗？要当心，地板上原来就有一些磁 
贴，可能会干扰你。 



♦铉飆承令 


function 


rating, showtimes) { 


this .title 


this.genr^ = genre, 
this. 


rating ； 


this. showt:lmes~ 


this .getNextShowing^ = funetionf) f 
var now ^ new Date () .getTime() r 
for (var_ i — 0 ； i < 


.length ； if+) 


var showtime = gettimeFromString (th±s, _ 

if f (showtime - now) > 0) { 

return "Next showing of - Tl_ + _ ♦ 


[im 


is M 4 th 1 s, show time s [i] 


^ i 用 1 a 垫磁站宪咸 
^ f 他' 



V 


















































JavaScript 函数对象 


tJ>ereiare ri9 

Dumb Ouest^ns 



问: 




函数和方法真正的差别是什么？毕竞，如果它们 
是同一个东西，为什么还要叫不同的名字呢？ 


答: 


根据 约定， 如果对象有一个禹軚，我们就称它是 
一个方法。它们都以同样的方式工作、只不过调用对象 
的方法时要使用点操作符、而且方法可以使用 this 来访 
问调用这个方法的对象，可以认为函数是一段能调用的 
独立 代码，而方法是与一个特定对象关联的行为， 


问： 


这么说，如果用构造函数创建对象，而且这些对 
象有一个方法，那么所有这些对象都共享这个方法的相 
同代码哕？ 


在对象的体中确实是这样， this 就是时象本身。 
不过有查特殊的情兄下并非如此；例如 T 如釆对象中还 
包括对象，情况就会更为复杂 3 如果开始在对象中嵌套 
对象，就需要仔細查看请 iU 不迚以上.理科是一个很好 
的一般庳则， 

1^1 * 我听说面向对象编程中可以有对 象类， 它们相互 
继承。比方说，可以有一个哺乳动物类，狗和猫都可以 
继承这个哺乳动物类 a 在 JavaScript 能这么做吗？ 

V - 当然能， JavaScript 使用了一种称为原型继承的机 
制，与严格的基于类的樓曳相比，这是一 种更为 强大的 


^ • 没错，这正是面向对象编程的优点之一：你可以 
在一个地方为一类对象（比如所有 dog 对象）釗建代码， 
所有 dog 对象都会其竽这个代码，要让各个猗有所不同， 
现在的做法是利用羼性，并使用 this 访问这些属性。 


糢型 。 深人介绍原型继承超出了本书的范畤，不过，不 
管怎样，11会 it 我们更有佶心编写 JavaScript 代码， 


问： 


我们说 new 
是这样吧？ 


DateO 时就是在使用一个构造函数, 


1^1 * 我能把 this 设置为我选择的一个值吗？如果可以, 
会不会弄乱了？ 

不行： 不能把 this 设置为任何值^要记住， this 
是一个关键字，而不是一个变责！看起来它像是一个变 
量，表现也有呰类似，不过它确实不是变量。 


:对，问得好！ Date 是 JavaScript 中的一个内置构遠 
函数。如果碑用 new DateUi 你就会得到一个 Date 对 
象，这个对象包含很多有用的方法，可以用来处理3期， 


问: 


我们自己编写的对象与用构造函数创建的对象之 


间有什么区别吗? 


1^1 • this 在对象方法之外有值吗？ 

爻有，如莱没有调用一个对象方法， this 就是木 
定义的 （ umiefineti) a 


闷: 


所以应该这么考虑 this : 在_个对象上调用一个 


方法时，执行这个方法的整个过程中 this 的值都设置为 
这个对象，这样理解对吗？ 


主要&别在于你如何创建对象。用大抽号和逗号 
分焯的属性所写的对象称为 M 对象字面乂你是照字 
面把这些对象輸入到代码中！如果想要一个类似的对象, 
就必颂自行榆入，确保它有同样的属性，由构造丟数创 
建的对象則是通过使用 new 和一个构造南数创建的，它 
会返回对象 B 你可以使用构造函軚创建多个有相同爲性 
的对象， 不过如果愿意，这些属性就可以有不趵的属性 
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练习答案 



代硌糍贴 




冰箱上有一个能正常工作的 ( Hovie 构造函数^不过有些磁贴掉到地 
上了 D 你能帮 ifc 把它整理好吗?_雯当心-地板上原来 就有一 些磁 
贴，可能会干扰你。 





參任趣承參 




functioir 

thia.titre 


Movio | 


| title | 

■ F 1 

genre 


title 


this. ge nra = gen rs, 

this._ [ rating 

this, show time b = 


rating . 


Jfi □ 


, rating, showbimas) f 

巧&婁 i 剩的属性详八 
rfi - tttU. 0 £i^lrf^ irflttt^ijte 
. 

- # 初姑化 ■ 这签属性 D 


showtimes 
t hi s^gfitHext Showing = functionO 
vac now = netr Date{) ,get ： Time() 
for ^vac„ i = 0; i < 
var " 


广 


f 在的象中？ h 呀暴性. t-MdMtkU 



,length; £++) 



3 hovtime = gelrTimeFramS^r ingfthxa . 
if f(showtime - now) > 0) { 

return T .Nex*t-showing af 

) 


不 fS 3 用一个分署钱家这 



[i]) 



xs 


this ■ showtxittes [ijr 


er 





[ tliisTsbowtimea | | | 

L|yr.uw_WWW 咖通 






bark 0 


\ this \ 
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试一试你的构造焱数 

既然有了一个 Movie 构造函数，现在就来创建一些 Movie 对象！输人 Movie 
构造函数，然后增加下而的代码，试着运行你的枸造函数。我们相信，你 
肯定会同崴这是一种更为简单的创建对象的方法。 



var banzaiJtovie = new Movi« ( ,T Buckaroo Banzai 11 , 

"Cult Classic^, 


— 个 ^ 爿篆 （这 I 我 们蕞善 政的恐 
c 科这垫值铨入朽参 


ii * SF VJ . 把的敖邊 

il 走尨放夺基蛀碑用中。 — riiOOpm^ "5:00pm' ”7:00 P m" ， "11:00 P 以 


var plan9Hovie — new Movie {''Plan 9 f rom Outer 3pace'% 


"Cult Classic' 
2 ‘ 


^ ―接下莱是彩片 


OHt£K 


零 _■ ■ V A K- 


r3:Q0pm^ ”7:00pm' ,T 11:00pm T, J),- 


var forbiddenFlanetMovi.e = n&w Movie( M Forbldden Planet 11 

"Classic Sci™f± n ,- 

5, 

[ ,T 5 rOQpm r V ,f ^ ： 00 pm !r ]j; 


一 '士'然 _ 钱后 I 


alert;{banzaiMavie .ge^KextShowing ()}-; 


^ ~^ —§ 鲇象3«宵对礬，下面調用 


aleri: {plan 9Mo v±e. ge tNextS howingfH ; 


0 etN t<tshjjwLi^ 0 ■方 4 . 级 醒-用, T^ - 



alert fforbiddenPlanetMovie. getNex^Showing Q 7~; 


个读嘁的问 




— 一一一 


’ — OK 


htt|Kr//locallwst 

H ^in 9j rf ^ is 3 . 加 _ 

一上 r 、 T 

httpv/locuth 如 I 

MfrKt Showing (^Su CkarTJO is 
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公共对象之施 





薄这祥亙的象.靶属馎罢矛存 
上石 …… 

……方法基6下面，这 
样一埯軚軺5稱吋粱 
真属性以总方法。 


扱贺你*你 B 经孪完3&齩和对丨『睞然 B 
鉍全 S 3 蓐 * 銶東达一牽么前， T ® 芘点 时闵在 J 
A 疋的坏堍中对 JavaScript 对象铴个秸金，€轼是 
说，在它们的 撖相患搀：闳览 Sj 


现在，你可能己经注意到…… 

……你的身边到处都是对象^例如， document 和 
window 就是対象 t 我们从 document .getEl- 
ementByld 返回的元素也是对象 t 我们述会遇到 
很多对象，这只是其中的几个，等我们淡到 HTML5 
API, 就会看到对象无处不在！ 

K 面再来看看这本朽前面一直用到的一些对象： 


的一些的篆 
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JavaScript 函数和对象 




window 对象 到底是 什么 ? 

为浏览器编写代码时，你的生活中总少不了 window 对 
象。 window 对象表示你的 JavaScript 程序的全局环境， 
同时还表示应用的主窗 P ， 因此，其中包含很多核心 
的属性和方法。 K 面来看看这个对象： 





| i ^ i " http ; /^ oVi i html 


T 衙 4 我们 的 wi^cbw 的 t , 

我们钰了餺的凡个4鐾属伐和方索纭 
iS 荀權多其他屬柃和方4 . 




Mtp :〃 hKAjN»t 

Nt 其 1 luckarw fi-anzai L tK>pm 


丄 


r 從 M 


以笆含鸩存到铱 11 
杖!甚子的一个率。 


< fen ^ Qau ^ i$ r 

它金 S 爹一个越逋。 
打矸—个妒的到拓 H 窗 


window 


location 
status 
onload 
document 



…■‘ ：… - T - ■- V 




你 tt 圯过这个 4 伐: p ^ d.M 
3 资面龙 f 扣栽时类该用 

〆 ■ 


¥ to 



alert 

prompt 

open 

dose 

setTimeout 

setlnterval 


vr ( m ^ t 灸姑今 aU¥t -只不 
{ S 含从用户得到传 &9 




耜宠的 ㈣ 用问味后戊用—个钍 
n 栈 4 。 


以一个馮宕的蚵闵闵阉反 I 级用 _个赴 
理战4, 
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window.onload 如何工作 











| 錡黍衆 | 

♦往酈承魯 


window 是个全局对象 e 

看起來可能有点奇怪，不过 window 对象相当 
于你的全局环境，所以即使没有在前面加上 
window , window 的属性或方法名也能顺利解析。 

另外，你定义的所有全局变量都会放在 window 命 
名空间中，所以可以作为 vjindow.nnyvariable 来 
引用（这里的 myvariable 就是你的全局变置名）。 


爯谈 window.onload 

这本书中 H 糾为止经常用到一个 w i ndow . on load 事件处理程序 & 通过向 
window.onload 属性指定一个函数，可以确保在页面加载和 DOM 完全建立之 
前不会运行代码《现在， window.onload 语句中发生了很多事情，所以下面 
再来看一看这个语句，便于你 理解： 


ii 蕞我们的全易 window 的象的 

的象。 —个厲性。 

^ window.onload : 


ii 个谨名產數 ，後给愚性 


function () { 


// code here 


}； 


一 ) 


教 ㈣ 刪们的叫 
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JavaScript 函数彳 D 对象 


再谈 docutwenf 对象 

document 对象也是我们熱悉的面孔，这是用来访问 DOM 的对象。你已经 
看到，它实际上是 window 对象的一个属性，当然，我们没有用过 window , 
document , 因为并不需要这么做卜面来掲开面纱，简单地査看这个对象 
更有意思的一些属性和 方法： 

屬忮甚茲 偁之枯 的鬼务器的域，如 






方4 





getElementByld ♦- 
g et Elements 白 y Tag Name 
getElamentsByCJassName ^ 




辈中 栽们 fi 用 3 a 个方沾來釗建新的捲故列表元 
最。忿含 & I 逢 Ci 合色含存: > OM 中的走者 


document 


' iddocu ^ u ^ titU , 

丈枯的极超 。 


L/LRt 犹 4 丈枯的 

你和遠的.这个方 法可以 楼踌; t 索 M 敦取 
这个; t # 。 

这 ® 个方鸟 0« t & tcm ^ n 4 ：^y td ^ fp/ r p . 不过谂们 
分到伎用杉记和类来孩极无 


createElement ^ 


爯 ^docuweKt.getElementlyld 


这一章最前面我们承诺过，读完这一章你一定会了解 
document * getElementById fl ® t 你已经学习 了 函数、对 

象和方法，现在…切准备就续！下面就来给出 说明： 


doc ^ t ^ 立枝 的象.这 P 个 M 咖 ㈣ ― t 的 
^ %, 元许&扶两 》 OM 。 


var div = document.getElementByXd("myDiv"); 

fl 个 

3 低力 它联:致 : 

^ …… s <如>无舞的< 矸 ㈣ ， 


个元*的象 


这个语法串看上去让人有些困惑，不过现在意思清楚多了，是不是？现在 
我们知道， div 变量也是一个 对象； 一个元素对象。下面再来仔细査看这 
个对象 D 
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元素对象 

苒来考 虑一个对象： 元素对象 

应该+会忘记，我们处理类似 get Element Byld 的方法时，它们返回的元素也是 
对象！嗯，也许你原先没有意识到这一点，不过既然现在已经知道了，可能会认为 
JavaScript 屮的一切都是对象，嗯，你想得非常正确。 

你已经见过很多元素属性，如 innerHTML 属性。下面再来看另外一些重要的属性和 
方法： 








瑯 


今、 


飘， 

、任郡承令 # 





6 ^ iv^^trHTML ；另外系个嚷 
性分別是(这个尤 
秦 i 多少子尤 i ) 和 fr^tchad (第一 
个子 光着. 釦果有的淺）， 




P 


ronerHTML 

今 I childH/emenfCount 
firstChild 


, | 叩 pendCWid 

^W . 使 用 i 法 ifppedetuW 和 M^trt 松 fbr 咖 insertBeforp 

dom 中钵入耙尤泰，作巧 (i 个 大亲的 子克棄 4 ^ I setAttribute 

getAUribute 



性和方法 ,不过斛 
充走 棄啪友 拍这奋 
Mii 和方法& 


我们将使用 setAttAbute 和 gctAttHbute 采设 1 扣截奴 夭棄中 
的屎 性： Ot 如 r 's,Yt' > ， f cla^' |o 'Md" n 


t^eTeiure no 

Dumb Questions 

^ * 鞔然 window 是一个全局对象，这说明我可以使用它 It 是的^不过，对于这种特珠情况^我们并不推荐这么 
的属性和所有方法*根本不用先指定 window , 是这样吗？ 做， 因为很多对象都有 on i oa d 属性. 所以如果在 onload 


答 : 


没错 u 是呑 ^ window 对象的爲性和方法前面加上 
window 完於取决 于你， 对于类似 a 〖 ert 的方法，所有人都 
知道它是什•么，沒有人会对这个方法加上 window 。 另一方 
面.如果你在使用不那么有名的属性或方法，要想让你的 
代码更容务理解，就可以使用 window D 


间：这么说, 理论上讲 


我完全可以写成 onload = init ， 
而不是 wimlow.onload = inh ， 对吗？ 


前面使用 window 的话，你的代码会更 清楚。 

I A ) _我们之所以不说 window.onloaci - init { J t 原因是这 
会调用函数，而不是使用它的值，是这样吗？ 

怎. 

V •对的 e 如果冱数名后由使用了小括号，比如 inito ， 就 
是说你希望调用函数 iniU 如果只是使用名而没有小括号， 
就会把这个必数值域属性，檢入时差别很细微, 
但是它们的含义有天磙 之别， 所以一定要特則当心^ 


* 创建 window 刀 nload 处理程序的两种方法中哪一种更 


好一些？是使用函数名还是圍名函数? 
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量没有孰优孰劣、—它基本士都做同样.的事情:-本 

■ wirsdow .. oHloact 的 倦设 1为..级*加载時 将运 行的一个.去 
:舞果坤+革秤 原:跺 4后秦在程4'中水 弟一 个函軚饵吼 
.:i nit :， . ::说 太要定元 r —：^ ihit^r j | t,~ 1 ■■: 使用4方法:' 

- _ • . ■ ■ .■ ■ ■ ••■■•■■ ._ .. . ■- .. — i 

■■•■_ • 雷 ■* ti i. ■■■_ ■ ■■ _ ■ 4 ■ ■- ■ _ _ ■ 

关系不大> _ 

■ ' ■. .•_■•• ■ ■.■*.. . ■ 

- 柯:^藏喊為論减魂瘤钟 

建的对奪有什」—；乙1 ■ U 


~ - ■ __，.- ■._ 一 ■— •■ ^ 

— S 



JavaS6rfpt 法数 对糸 

■— — =— "— 

— ~ J| — =T£z.~3 4H 




区.. 别是:内 .真 对 .色 孝掸 鱗 够定矜 果叫 T : 所以 T > Xjhr -；._ 
参考 W 3 C 规忘奉了解内 Z 对象的巧_辱彳生，方碑■•另 \ 
4|£> ^ ^ String , 可飽有.二轉可套的:属.啤 .,:■ 不 . 

能修 ^二 :％此■:象_'是砷 象，■夫予 4置^.象 v :.:: 

I 好的一点是;这冬祙 i 乙‘寿 ‘ mt 圩 t 。 . 二./ 

个的幕 M 芍以 砉免 ■:本 J : ¥.〜. 
.:- 衫 的 jfltfasbrift 参 考.年季: 3 解每 故^袴 和參 V- 
飞去的•的鸯_ t 束匆為_容 □ 二二 77 —二 
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函数与对象回顾 



BULLET POINTS 


、以 _e 夕 





函数也是值，可以賦给变童、传递给其他函 
数、存储在数组中，还可以赋给对象属性 

对象是属性的集合。 



■ 要创建一个函数，要使用 fundcrn 关键字， 
如果有参数，还要加上小括号来包含参数 D 

»函数可以是命名函数 T 也可以是匿名的。 

■ 函数的命名规则与变量命名规则相同 & 

■ 函数体放在大括号之间，包含完成函数工作 
的具体语句 

« 函数可以用 return 语句返回一个值。 

■ 要调用一个函数，需要使用函数名，并传入 
它需要的所有实参。 

» JavaScript 使用传值方式传递参数。 

- 传递一个对象作为一个函数的实参时，比 
如 dog , 形参会得到这个对象3用的一个副 
本 0 

■ 函数中定义的变量，包括形参，都称为局部 
变簠。 

■ 函数外定义的变量称为全局变圼 s 

■ 局部变量在定义该变童的 函数之 外不可见。 
这称为变垦的作用域。 

■ 如果声明一个局部变童时与一个全局变量同 
名，这个局部变童会遮蔽全局变星 3 

■ 从页面链接到多个 JavaScilpt 文件时，所有 
全局变虽都定义在同一个全局空间中。 

■ 如果赋一个新变量而没有使用 var 关键字， 
这个变邑就是全局的 t 即使是在一个函数中 
首次賦值。 


可以使用点记法或[]记法访问对象的属性。 

如果使用[ ] 记法，要把属性名作为一个串用 
引号引起来》例如 myObject [ t ’ name"L 

可以改变一个属性的值1删除属性，或者向 
对象增加新厲性。 

可以使用一个 for-in 循环枚举对象的属性。 

赋给一个对象属性的函数称为方法。 

方法可以使用一个特殊的关键字 this 来引用 
调用这个方法的对象。 

构造函数是创建对象的函数。 

构造函数的任务是创建一个新对象.并初始 
化这个对象的属性 

要调用一个构造函数创建对象，需要使用 
n ew 关键字 D 例如 new DogQ a 

这本书中一直在使用对象，包括 
document, window 和很多元素对象 6 

window 对象是全局对象。 

document 对象是 wi ndow 的一个属性夺 

document，getElementBy Id 方法会返回一个元 
素对象^ 
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JavaScript 函数对象 


H 丁 M 厶5镇字游珙 



真是激烈的一章，让我们充分了解了函数、对象，属性和方 
法，有太多东西需要记住。坐下来，放松一下，让你原先休 
患的那部分大脑运转起来 s 下面是第4章的填字游戏。 




4顧承參 





. 


'賴 

- 




. ■ 


■ ■ 




1 








: 


m 


TT 


mm 


>：■；；：• 


mg 


::轉囊 






:-二二 •■.- 


■ 




減泰. 








... . ■■- 


m 


— 


㈣ 權 






横向 

I. 这些变量只在函数内部可用。 

4. 真正的全局 对象。 

6. _对象表示 DOIVU 

II. 实参按_ _ __传递。 

12. 使用这个关键字开始一个函数定义 D 

14. 没有 return 语句的函数返回_ 

15. 对象中的函数。 

17. 没有名的函数 4 

18. 函数定义中要提供_。 


纵向 

2. 这种函数会创建对象。 

3. 函数可能包含也可能不包含这种语句。 

5. 用点操怍符把属性和函数调用串在一起 

7. window 中的一个属性，我们会为它赋一个处理函 
数。 

8. 函 k 调用中要提供_, 

9. _^操作符允许你访问一个对象的属性和方法。 

10. 按约定，构造函数名首字母 . 

13. 对象方法中指示当前对象。 

16, 变量作用域为到处都可见。 


你现在的位 
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练习答案 




t 


!P-. 


parpen your pencif 
^ k Sofution 


〆 _、 


你已经 7 解了函数，也知道了向行参传递实参，利用你现有的知识分析下 
画的代码。.跟踪这个代码之后 S 在下面写出各个变哜的值 。 下函是我们咮 
答案。 



▼任 顳承 


function dogs Age fage>- {: 
return ag&. * 7; 

} 

var myDogaAge = dogsXge(4r ； 

function rectangXeArea(width, height) { 
vaf Area = width *- height; 
return ared ； 

) 

var rectArea = rectangrleAr^a {3^ 4J; 

function addUp (nuraArray) f 
var total = 0; 

for |var ± — Or i < numArray.length; i++J { 
total += numArray[i|; 

} 

return total ; 

) - 

varj theTotal = addUpUl^ 5^ 9 ])； 

£tmction gstAvatar (points)- { 
var avatar; 

- if (points <100) { - 

- - rHo ^ so ";.-：： 今，- ： _ .一 y : <— 

J else if (points >100: points < 1000) f 

avatar - ' 

} ( - • -i . … 

avatar^ = T _Ap© TI ; 








r^tvtrn ayat&r; 


1 


v^z: .myAv^t^.r - getAyatar (335); 


- i_'_ ■= - - _ _ - 

myDogsAge = … .J 钱 …- . 

reetArea = “…/ 足 * . . 

t ^ ■色 T O t 1 I ■■■ ■•■ - 1 - 1 - . 

■'_■■■■■• ■ • ■■ ■ --J--.. _■■■■,. ■■■-_、■ ■ 一 - _ ■- J • * 

mjpjivatar :; v ： 
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HTJV 0>5 镇字游珙考寡 


JavaScript 函数对象 

級研 養％^ 

中 秦 

〜 齟承參 
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地理定位 








5 实现 HTML 位置感釦 


无处 可逃，有时， 如果能知道你在什么位置，结果会大不相 N (特别是 对丁一 
个 Web 应用） s 这一章我们会告诉你如何创建位置感知的 Wd > 页面，有时你能精 
准地指出用户正站在哪个角落，有时只能确定他们位十哪个城区（不过总能知 
道在哪个城 rfi ) 。当然 T ， 有时你根本无法确定他们的位置，这可能是技术 h 
的原因，也可能只是闶为他们不希望你多管闲事。可以想想看^不管怎样，这 
一章我们开始研究一个 JavaScript API ： 地理定位。带着你最好的位置感知设备 
(甚至可以是你的桌由 PC) , 出发吧 。 


这是新的一黧 165 








地理定位 



位 I, 忮 1 , 伎 1 

如果知道你的用户在哪里，这会大大改善 Web 体验； 
你可以向用户指明方向，对他们要去的地方给出建议， 
你会知道那里会不会下雨并建议室内 活动， 还可以让 
用户知道他们所在的区域内还有哪些人可能对某个活 
动感兴趣。使用位罝信息的方式还有很多，没有做不 
到，只有想 不到。 

利用 HTML5 (以及基千 JavaScript 的地理定位 API). 
可以很容易地在页面中访问位置愔息。也就是说，正 
式开始之前，关于位 晋我们 还需要了解几个问题 w 下 
面就來看-看…… 



tlierei^re no 

Dumb Questions 


A Z 我听说地理定位并不是一个真正的 API , 是吗？ 

| :地理定位不算是现有 HTML 5 标准的“直系"成 
员，不过不管怎样，它确实是 W 3 C 的一个标准，得到了 
广泛支持，而 I 几乎所有人都把地理定位当做一个重要 
的 HTML 5 APL 所以它几乎就是一个真正的 JavaScript 
API ! 

1^1 * 地理定位 API 与 Google Maps API —样吗？ 


问 : 

趣吗? 


我的设备会暴霣我的位置,难道这不存在隐私问 


荅： 地理定位规范指出，所有浏£器必顼得到用户的 
明确许可才能使用他们的位置。所以，如果你的代码使 
用了地理定位 API ， 測览器首先要做的就是确保用户同意 
共享他的位 


问 


• 地理定位的支持程度如何? 


不一样 a 它们是完全不同的 APU 地理定位 AH 只 
关注获取你的全球位置信息 。 Google Maps API 是 Google 
提供的一个 JavaScript ^， 允许你访问所有 Google Maps 
功能 s 所以，如果需要在一个地 s 中显示用户的位 
置， Google 的可以提供一种便捷方法来实现这个功 
能， 


地理定位得到了很好地支持 B 实际上，几乎每个 
现代浏見拽都支持地理定位，这包括桌面和移动洌 E 器。 
你要确保使用刹充器的最新版本，如果确实如此，说明 
你很可能已径准备好了。 
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实现 HTML 位置應知 


緙痘和经袞 


要想知道你在哪里，需要有一个坐标系统，而且地球表面上要有这样一个坐 fe 
系统 D 很幸运，我们确实有这样一个东西，它使用纬度和经度共同构成坐标系 
统。纬度在南北方向指定地球上的一个点，经度则在东西方向上指定地球上的 
一个点 0 纬度从赤道开始测量，经度则以英国格林维治作为起点测地理定 
位 API 的工作就是使用这个经纬度提供任怠时刻我们所在位置的坐标 ： 



: f|fi 地详 T 在1■线格 
钵播治 S 拿天太台。 



钵度4筢赤迮奋儿方僉的 眙秦。 


輿®烙林適治的 
宝杉光 514 力 0 


茲遑甚皞輿®格钵碓治 
系®方命的顰 A 。 


93 夺的波多违伏话 

f 旮％, 

鉍卷 杓鸟的4锌 { 

^-±2..0S f 







錄逋/经度特写 


你可能见过用度/分/秒指定的纬度和经度，如 (4738 ’34^12232321还可能 
见过用小数值指定的经纬度，如 (47 石 4,-122.54), 使用地理定位 API 时，都要使 
用小数值6如果需要将度/分/秒转换为小数 T 可以使用下面这个 函数： 

function degreesToDeeimal (degrees, minutes^ seconds)( 
rfituim degrees + / €0.0) + (seconds / 3 £00.0} ; 


钱和右林郝用負數 
(£ 表^ 


你现在的位置 ► 
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GPS 

很多较新的移动设备都支持全球定位 
系统 （Global Positioning System ) » 
它能利用卫星提供极其稍确的位置信 
息。位 S 数据可能包括高度、速度和 
朝向信息。不过，要使用 GPS ， 你的 
设备必须能看到天空，而且可能需要 
花很长时间才能得到位董。另外 GPS 
还很耗电^ 


确定亡其 

地理定位 API 如何碥定你的忮 I 

要做到位置感知并不要求你非得用最新的智能手机。即使桌面浏览器也一样能做 
m . 你可能会问，桌面浏览器既没有 gps (全球定位系统），也没有其他方便的 
定位技术，怎么确定位罝呢？嗯，所有浏览器（不论是设备浏览器，还是桌面浏 
览器） 会使用不同的方法来确定你在哪里，只是有一些 E 稍确一些，另外一些没 
那么精确而已。下面就来看一看： 





办公十么新餺坛艺……我 OR 
布桌®渕不过裁的圯地址订认硪 
射钊一个 {2 蠆，布时保这相省准碓 D 










舞任鄘承參 


IP 地址 


基于 ip 地址的位置信息使用一 
个外部数据库将 ip 地址映射到 
一个物理位置 D 这种方法的好 
处是任何地方都可以使用。不 
过， ip 地址通常会解析为其他 
位置，比如你的本地分局 
的位置，而不是你的具体位置。 
可以认为这种方法在城市级 
(甚至有时在街区级）很可靠 D 
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实现 M id . 位置感知 




Wi-Fi 


Wl - Fi 定位使用一个或多个 Wi - Fi 接入 
点完成三角定位^这种方法可能很 
精确，在室内也可以用，而且 
速度很快，显然，这要求你 
相对处于静态（可能正在一象 
咖啡馆喝着大杯冰茶）。 


我阀转子乎 ® 的咖啡馆，蒂蘑我的蕙 
圮本电摧，邊过无 钱订圈 上闷埘踅 # 你逯 
过三囁 定饺所 冇达柱死线运营葙軾眭知逮 
我在嘟里。4起采很不错 D 


蜂窝电话 


蜂窝电话三角定位可以根据 
你与一个或多个蜂窝电话基站 
的距离来确定你的位置（显然， 
基站越多，位董就越准确）。这 
种方法可能相当精确，在室内也 
能用（这与 GPS 不 同）， 而且它 
比 GPS 也快得多，不过它也有一个 
缺点, 如果你的位罝很偏僻，附 
近只有一个蜂窝基站，位置的精度 
可能就不容乐观了。 


你规在的位罝 ► 
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~~ - I— - ■ I J ■_ = ' - _ 

ffli 定位覃的方法二-力: . 


— ■ - 

也金鏟:么 V - 

秦:口 


■" ■> 

分 .______ 


叶以肴到&你不需要担心位置如何确定， 
我们会把重点更多地放在位置精度丄 & 
根椐桥度，你能确定这个位罝对你来说 
有什么用。别走开，稍后就会问来讨论 


1没办法知道。 


，.:这个问翅牧答棄很興单许没办法知 i 
:道: rt : :，.因为聲由滩鏟器卖:现籴确定如何: 

:;: 辑到俾 置辞顏皂 ， : 麵 單琴 : 
: . 碰献撫 ㈣ 齡确遍的 :: 

^ 位寒际本 v ■ 个 ; 聪明的 W 览翠可 能 : 
首先使用蜂窝电话三角定位，如果这种方 
法可行，你会得到一个大致的位富，然 
后再用 Wi-F^ilGPS 提供一个 吏精确 价位 


精度 e 
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实现 HTML 位置感知 



pen your pencil 


请考虑你现有的 HTML 页面和应用（或者你想要创建的应用）， 
如何在其中结合位置信息？ 


□ 允许用户与附近的其他人共享这 个位紫 倍息。 


□ 


让用户更容易地找到本地资源或服务. 


Q 跟踪用户在哪里活动 & 

Q 告诉用户他们来的方向^ 


使用位置确定用户的其他人口统计特征, 


女酈承參 


存 ( if 萬出 3 的想法 
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使用地理定位 API 





你剡底在彿里 ? 

嗯， 你当然知道自己在哪不过下面来看你的浏 
览器认为你在 哪里， 为此，只需要创殖一个很小的 
HTML ： 

若葙面注蕞.老一奮 r 忽鉍柜儉一 个亡件 (^ yU 3 cj £) ^>n 
/ 戧 f ) 的奸书 jMnstKpt 部诠 4( i 个太4 中.另外 注有一 

个样式表 loc css , 它褊让页 ® f 起瘃 H 先。 

<! doc type html> 

<html> 


<head> 

<meta charset="utf-B 1， > 

<ti11 e>ifhere am I?</title> 

<script src= ,f myLoc.j 3 ,r X/scr±pt> 

<link irel= T ,stylesheet” href = ， T myLo c.cs 3 "> 
</head> 

<body> 

<div id;’ 1 location” > 

Your location will go here. 

</div> 

</ hody > w 

htwd 的丈蛘中^ v 


戟 D 将把 珀理定 佬代砝写 4 


值用这个< d [ v > 狳出仿 


L ^ C . 


现在来创建 myLoco"^ 并写一些代码。我悯先很快 
写完 代码， 然后再回造头来仔细硏究&把 "F 面的代 
码增加到你的5：1沖0二巧文 件中： 

_ S 3羝器加载资 I 裁们 U 用函數 ytMy U^tb 〜 



windov. onload 


g ^ tl ^ Location ; 利用这个检杳來砝保讲愁麥友#地瑾定沄釦果 

/ ^ vl ^ atoK ^ eo ^ atio )^^% ^ 说來到 筅苕支為这个 A 色。 

如粟洌轉地理友 0 AP 卜 .則 成用 Qetcuire MPos Ltb tv 才:■左. 
稃详入一个钍瑾遂盘 d 梢后妖金弇 *(i 个必蛊 


function getMyLocation () { 

if {navigator*geolocation) 

navigat or + g© olocation. getCurrent Fob it i on (di spla^Loeat ipn J 
} else f V 

alert ("Oops-, no- geo location support ”）； 



釦莱洌兒器 -；r 友括地理宏泛，弒令 
用卢锌出一个凝薤。 


riLspUt 送 | 盘妖~展将 

屢換议侘堇的让理筏存。 


t 72 裝5章 



mmwii 


(AMA 我们胡 处蠖後 冉.釗 1 港象得约 一 个佬1时妖 

fianction di ： spl ayLo c ati. o nt (p o si tion} { 

v^r latitude = ^psition.coords.latitude; 
var longitude — position, coords + longitude; 


位置感知 

^Jt ▲ 泰 _ 

钍瑾裎 年#人—个位最. 


^>0etOutirveL.. —— ， 

其中包含治鼉的钵廑和鉸度（畎苁一些吒度(哀* 

僉趣 


承參 


# 

-V 


,U.fi ositu ) i^.. &t)orsU 时象作 
i _ J 侉 2 ■钤终度扣经度> 


var div — do cume nt. ge tEl Arne ntByl d ( n location 1 '); 
div^innerHTlCL- ~ ,T You are at Latitude : " + latitude + ”• 

\ 


Longi-^uda ： 


longitude , 


疼后 ■ Ur+TML •获译 

< div > ■ * • r* b 


… ■_ ^4 ^TO ^ 4 (i 


Q=- 


试一试你的位 I 

输 人这个 代码，试 L 一试这个統的位罝感知页而。 

第一次运行•个地理定位 WeF 应用时，你会注意到浏览器会 
请求得到你的许可来使用你的位置.这是一个浏览器安全^ 
检査，你完全可以告诉浏览器不允许使用你的位罝信息。不 
过，假设你想测试这个 Web 应用，应该会点击 Allow 或 Yes fl 
确定后，这个应用会昆示出你的位置，如下所示： 




i . 

^ O in C V [ocalhost O ☆ 岛 S 〆 气 


You are at Latitude : 47,62485, Longitude : -122.52099 


WlJ 



戀一 —。 i 


二 Atquesi 


i 记 a , 苒不兔打弒敍得 f _) 佳 3 錄 f 龙著 
1 含儿…… 


p^missicf, Qtiiv OUCt^rYJ-) 


hours 



t 


樓 >4 饬值用的到览器， s 个 
碎 5 H 音求3 辟有辦 不同，不 
过 i 冬 f ! 类似的， 


ii 弑4仿的行 ® 赛， 仿触 
蘯 句链鸟栽们的不同（如集不展 
H A 制含让我们赶。 


如菜沒有馎糾饬的治 I ,羌 S 假议你 S 较 A 4检奢 
3辁入抟碣之类的问趑_ m 4过 ；1 费致们金 
洽 ds —# 代媒来谓试达个同 毬…… 


你现在的位靑 ► 
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回两地理定位代码 



我们剛才傲 J …… 

既然有了一些地理定位代码， 而且已 经成功地运行（再说一次，如果你还 
没有看到 位置， 先别着急，稍后就会介绍一些调试技术），下面更 i 羊细地 
分析这个代码： 

A 如珀琪定忮代钨， 酋先* 粟知道鈐是"达令洌 E 器支特 M 頊定饺 
n 啤？ " 约杜，我们籾用 J 达#—个擧实： K 冇当谢 K 孩玄辧琏 H 定位对, 
它 的 na 吻 attim 对 JI 中才布一令 fleoloeaUtm A 性。 


箝吆我们芎认金* geolocatbH 属性是歪#在，釦果存在，弑使用迖个禺性! 
歪则，要让用户釦逋： 


if (navigator*geolocation) 


^ VJ . 值用一个 .〕. 测试来查看 ！ 否支袢地理左话 （ 釦篥 
不 i 辟， / unvi ^ ator .^ eolocatlov^^i V 4 S ^6 r {i 个 
条4#夹玟）。 


else { 


冪笮 a 个羼性, 弓以右 m 利用,釦果没奋 任 
alert ( ,T Oops f no geolocation support^); 用卢私 (| 


A 现在，如篡 碥实省一个 navigatongeolocafkin 厲性. 宵冰鏟鑲使两 a 实际 
上, nav [ gator . g«oloeatioHA 性 Jt _个对>,其中包宮甍个提3定位 APt 。 
迖令 AP 〖 友辩的主要方法 * g € iCurre «1 fosltiow * 它的 工作嚴 获取洌览器 fit 
S , T « l £ 深入螆7薄这个方法，它省3个参教，其中铴令是玎选的； 


Mi^a , apl 就基带属 fi 和 
方沾的对象 ■: 规不 
I 撣皮韋3铨援前 i 3 
javas & ru - pt ^ [ 


—个 么盘 . 如菜 ' 錶赛餘咸功 
吆 砝定你 的尨 S 杖金伐用这个泛盘。 


袅另外—个焱數-如果出 3 
(孤别 nn 石法碥宠你的记鼉, 射金谈 
用&个凾軚。 


getCurrentPosition(successHandler, errorHandler^ options) 


174 





实现 HTMI . 位酋感知 


A T ® 爯来*我们的 derturrahtPosmoi ! 方法请用，对现在来说，我们 HS 讲 7 
w successHandkr 参数来梵理成功得到浏 K 盎位 S 的锖況。葙后还会分析洌窠 
费疙砝 技到位 I 的情況 a 



if (navigator.geolocation) { 



还记 縳第 4 f 介绍过的搴链鳴?我 们僅用 
^ a—aUjr 的象來祝 t ^0^ LocratiD ^.^ $ , ta 
P，I v ^ avi ^ atort ^ 一个属作 


navigator, geoloc at ion* ge tCur r^ntPos it ion (di apl ayLo cation); 

^ (if 把一个圣 

gcj > bcatw ^ 定 3 伤的括 S 时， 數 f 4 遂妇 另一 个亟數。&该 

这 f 存这 用 ㈣ ioottl ⑽才象的 企碑用 dls ^ u ^ catlo ^ 

0«tCtirK£i^tmLtto^^- ；'i , 4 H 
孩供个弇参， fp 咸功®该。 


记佴第4 章扰过 ，函數也4 
榮.蚵以宠全苟以迖 辑衡, 


A 现在来漕成功处理我序 displavLocafid 溻用 displayloeatIonW , 地理定忮 
w api 尚 e 传入一个 posmoH 对象， k 中包玄有兵洌览费位 i 的馆 患，包括 
■"个« 繂&和 经度的 coorrflnates 对象 （它还包持其他一婺值，后逼再&讨 

7k) . 


他理定 f !2 API 入成功 
处3| 锃斿的 的*。 



function d i splayLo c a ti on (po s it ion) { 

var latitude - position, coordsflatituda; 


，it‘a 择冑—个喊虹属 沒- 肖 作 倉減 
咖 routes 的象的一个? I 用…… 


var longitude = podition. coords ^ longitude; 


…… coardliflMtc ^ 象忽含 5 你的 _ 
度和绍度。 


var div = document.getElementByld("location"); 


div.inneraTHL - "You are ^t Latitude: T, + latitude + ' Longitude： 1T + longitude; 

t 

这一郝分我们 扣作圬伢现在 來说 6 絞•菜—该 了 ◎ 

(if 只 昱得封 全祕戌房_ #奋贡®的—中五 

5。 


你现在的位置* 


175 


如调得到当前位置 

如何集成 

既然已经完成了代码，下面来看运行时是如何工作的: 





如果街户允许，地珥定忮弒值用最忧 
的方法来轉到洌茛 P 的位邐 （ ftps 、 彐 
洛定 位等） 


You are At Lajituj 知 47 咖 €5. Lof^ete. -122 


如菜她理定忮玎呔鴇定洌苠 S 的位 I, 钇 
会瀵角成功处理我序 • 捋仔入一个色宫鱟 
标的对象 B 
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浏览器 

















实现 “T ML 位置感知 


= t ^ - 

用到地理定位时，并不是每一个测试都能成功，即使你的第一个测试是成功的，接下来也有 
可能在某个地方出错。我们想帮帮你，所以为你创建了一个彳艮小的诊断测试，可以把它直接 
加到你的代码中。这样一来，如果你遇到麻烦，就可以利用这个诊断代码找出答案 9 即使你 
自己没有麻烦，但你的某个用户可能会遇到问题，你肯定想知道如何在代码中解决这个问题。 
所以增加下面的代码，如果遇到麻烦，一旦诊断到问题请填写诊断表。 

要创建这个读断测试，我们需要为 getCurreritPosition 方法调用增加一个错误处理程序^只要 
地理定位 API 在确定你的位置时遇到问题就会调用这个处理程序。如下增加这个错误处理程 
序： 


0 ctCw - rr £用律加苐一个々气，名 
0 ) tiU ] iLflyGvrpr a 这昱地 搜定匕 未能我约 G 邐时 
用的一个基數 ■=■ ^ 

navigator* ge olocation * g« tCurrentPos it ion (dis playLo cation, display£r £or ); 

现在要编写这个错误处理程序 & 为此，需要知道的是， geolocatiori 将会向你的处理程序传 
入一个 error 对象，其中包含一个数值码，描述了它未能确定浏览器位置的原因。根据这个 
数值码，还可以提供一个消息,包含有关这个错误的更多信息。可以如下在处理程序中使 
用这个 error 对象： 

达！我们的免处绎 杈序. 地瑋金佬八糾含南它传 
入一个辞 1 ’異。 

function displayls:rorCerror) { em)r3 寸拿有一个 w 如属作 ， 辑中色貪一个 0 〜 3 的數 3 迗蕞 

var errorTypes - { 用备个错镁 i| 兵辟一个抟 1_ 異鏑总的碎冷法 6 

D: rr Unknown error 1 % 

Permission denied by user ", 毛 _ 嵌们連 "J 个对象 - 包技 4 个屬性 H 分 A 名 # 

ii 昼攝 ftl #, 老 含：？ 蕺们鸯备个 


2 ; 

3 : 


f Position is not available 1 
'Request timed out" 


)； 


使用 crrj>KcoUeMtt, 将一个错 d: 劣总 
寒喊给一个#変 I e wMessflgi 


var errorMessage = errorTypes[error.code]; 
if (Qjrror.code == 0 ) | error.code == 2 }( 

errorMessage — e r r orMes sage + fi " + error, me a s age; 

} R _ 的吁椅和之， ^ 

var div = document. getElementById1 ocation ,T ); 屬付中含有 —# 討 H 的 fS 忘 < 

div. innerHTML = errorMeasage; 

然后把这个消 ,fe 徉加刊费泰 . 让用卢如 il 



把 ii # f| S tf 加约 trr0rM^^t$ 
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运行这个测试之前，再仔细研究可以得到哪些类型的错误。 








f 


ii ! SIT 铐诘，如果 It 他樣锅部; T ■合这軚金使用 
这个租# .- 畓皂辦属枝来3 ’ 科更多復总。 


var errorTypes = { 

0: ，T Unlcnown error", 

1 ： "Permission denied by usee", 
2; "Position is not available 1 ^ 
3 二 "Request timed out’ 

)> 





这.表泽用户招迻？ f 連用泛書烏的硪求 


这汉迖到锘兹當试过， 

罔_的 . ！看 trror. 来译 J <1 曼多 H 





输入前湿的诊断测试之后，砷以试一试。显然，舭 
果接收到一个位置、说切正常，你不会眷到任 
何错误。也可以拒绝浏览器使用你的位置的请求， 
来强制产生一乍错误或者可以更有创意一点，比 
方1拿着你的 GP & 电话进入室内同时关闭■网络。 
在最坏的情况:下「如栗你等待了很长时间而没有得 
到:任何位置或错误消患很有可能是因为超时值过 
丧，你一直在等待达 到这卞 超时时 Pk 本章后面会 
介绍如何缩短这_个超时时限。 - 


令 ㈣ 

11 ■寸 c d 

• j cr « 【 

T imed yui 

pi 

Permission denied" by us^r 



在这里填写你的诊断结果 

□ 我不允许使用我的位置。 

□ 不能得至 m 的位置。 

□ 过几秒后；我收至 f - 个淸息，指■出请求超时^ 

□ 什么都没有发生,没有位置，也没有1昔误提示 4 

□ 其他_ _ _ 
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实现 HTML 位罝感知 



要在_个移动设备上测试你的地理定位代 
码，需要有一个服务器 D 

Watcll it ! 除非有办法把你的 HTML , JavaScript 和 CSS 

文件直接加载到你的移动设备上，否则要 
想测试这些代码，最容易的方法就是把它 
们放在一个服务器上（如果愿意，你可以先简单看看下一章， 
了解如何建立你自己的服务器），并从服务器访问代码。如果 
你已经有一个服务器，而且希望这样做，建议你现在就着手完 
I 另一方面，如果你无法找到其他服务器，我们可以保证在 
Wickedly Smart 服务器上肯定能得到这个代码，这样就能在你 
的移动设备上测试了。也就是说，建议你先在桌面浏览器中运 
行代码，一旦成功运行，再使用服务器（可以是你自己的服务 
器，也可以是 Wickedly Smart 服务器）在你的移动设备上进行 
测试。 

作为第一个测试（包括错误诊 断）， 将设备指向 http :// 
w ickedl ysma rt . com/hfhtm f 5 /cha pterS/latlon g/my Loc . htm L 


找出我们的秘密位 I 


既然已经有了基础，下面对 位置做 一些更有意思的处理 s 看看 
你与我们在 Wickedly Smart 总部的秘密位置相距多远，怎么样？ 
为此，我们需要总部坐 fc ， 而且需要知道如何计算两个坐标之 
间的距离。首先， 再在 HTML 屮增加一个 < div >: 


tjiereicire no 

Dumb (Questions 


问： 


这个应用返回了我的位置，但 
是纬度和经度不太对，为什么？ 

答: 你的设备和位置服务提供商会采 
用多种方法计算你的位置，有呰会精确 
一些 T 有些不那么精确， GPS 通常是最 
精确的我们会介绍一种确定精度的方 
法，位置服务会返宵诂计的这个精度， 
作泠位置对象的一 部分， 使你能了解位 
E 数据可能的精确 程度。 



<body> 

<div id- pl Iocation ,T > 

Your location will go here. 

</div> 

<div id= ,f di s tance T, > 

Distaace from WickedlySmart HQ will go 
</div> 

</body> jh 
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计算距离的成代码 



些成品代袼：计算陡离 




想知遂如何 i + 篝 M 球上两点阂的距祺码？你会尨现布兵的细节很奄意思，不过 
迖布挂超出达一牽的筠所吆.我们会绐你一巷成戛代码来完成这令计算。 
要讦®谪个生标之 闽的 芘离，几乎所布人# 会使 ffl 半 iE 矢 （{ taversi 附）公式. 
T ® 实现 J 达令公式 0 如*纛栗知法两个坐标之闲的距离，弒苟认便尚达个代 
码来 i + S : 


承參 



a 个基裝 jzm 个圭枋 t 一个起点全杉■和一个终, f . 
f 钫.存这 ® 二着的矩處(輩佬#呼米) 


function computeDiatance(startCoords , destCoords) { 

var stariiLatRadQ = degreesToRadians(startCoo^da.latitude); 
v 在 r start^ongKads = degree sToRadi a ns {star t Coords. longitude ); 
var destLatRads ^ degreesToRadianstdestCoorda. latitude); 
var destXonqRads = d 备 gc^esToRaciiaiistde^tiCoordSiloiigitudeO^ 


var Radius = 6371; // radius of the Earth in km 

var distance - Hath, acos {Math. sin (startLatRads) * Math. sin (deatLatR&ds) + 

Math.cos(st^art^LatRads) * Ma^h.cos(dest.LatRad 3 ) * 

Math. cos {st;art.LongRads - destLongRa^ds)} * Radius / 


return distance; 


function d ^ greesToKadi&na ( degrees ) ( ^ ** 也布 , ’一龙中还含卷更多法續用 

var radians = (degrees * Math ， PI ) YlB (3; ^ 这个 基數。 

retum radians ; 

} 

把 3 个代茲增加 f ;) f 发的 Li)G js 亡件 ^ 
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编写代铒 t 我距离 


既然有了一个函数来计算两个坐标之间的距离，下面来定义 
我们在 Wickedly Smart 总部的位置（也就是本书作者所在位 


詈）， 也可以输入以下代码； 

v 社 ourCoo^ds = { 

latitude: 47.624851, 
longitude: -122.52099 


(if 运鄠的仿 

/ _ / it 杻玄义 3 —个字® I 的象。楚 
它作為一个含易 
js i 4的蛊筑面。 



实现位 置感知 

令 if 

b / * ~ » ■ ' e 

栽们 SOS 仿 fe 嶔们之 



现在來编写代码，我们所要做的就是把你的位置和我们的位置乎标 
传递到 computeDistance 函数： 


function displayLocation (position) { 

var latitude = position.eoortls.latitude/ 
var longitude = position + coordg * longitude; 


var div = documexvt.g^tElementByldriocatiorv'T); 

div.innerHTML = "You are at Latitude: ” + latitude ♦ ' Longitude : u + longitude; 

浚 I 捋仿的 fS 更董杉以芨戠 们的全 

k ： —― - 核 (4 ii Dcoy ^^ tApl & tay ^ e , 

var km = coniput^Distance (position. coords r otirCoords); 
var distance ^ do cxunent, get® lem« ntByld ( T 'di at a. nee ,T ); 

distance.innBrHTML = f 'You ar« ■’ + km + " km from the WickedlySm«rt HQ M ; 

ft _ 然后得到结 IL # t < dW > 


试一试位置代码 




现在来试一试这个新代码。把这个代码增加到 myLoc.js , 然后在 
浏览器中重新加载 myL OC .html e 你会看到你的位晋 .， 以及你与 
我们的距离。 

你的0 E 和筢燊笠殊金不同 H 
ii 奴決子访哀体存嫌罜。 




ft r ' ^ 

JilMiP 1 : 乂 ^ , ■ . . ^ ： . 

3 81 ㈤恤 47 624051 - Lo^tuda: -12a r 52QSS 

加胸 CJ km from 細 W>ckjft%aTrwt hq 




存线測 该： http : //wLctecd Ly s WM rt. c^^hfVitm.L5/chapt:fir5/rf tj Lx>t. 
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增加 google 地图 







到我的饺《迕科20471 
■90J75 烈矽然很不 错， 不过 
现在除布一个她®轼更#?。 


槿供位 置地裰 

前面我们说过，地理定位 API 相当简单，它提供了一种方法来査找你在哪电（你会 
看到，它还能够跟踪你的位置），不过这个 API 并没有提供任何工具为你的位罝给 
出可视化表示 & 为此，我们需要依赖一个第三方工具，可以猜到，自前为 It 在这 
方面 Googk Maps 是最流行的工具。显然， Googie Maps 不是 HTML5 规范的一部分， 
不过它确实能与 HTML 5 很好地互操作，所以我们不介意时常会临时转向，展示如 
何将它与地理定位 API 集成 & 如果你想换换 口味， 了解这些内容，首先可以把这个 
API 增加到 HTML 文档的首部> 接下来我们会讨论如何向你的页面增加一个 地图： 


<scrxpt 


src® ,T http: / /maps .google, com/maps /api/j s? sen sor=true M X/s cript> 


2 基 M ffpsj rLfit APf 


^ 一定晷猙琢样绘入， 碑参教 （如果沒有它，这个 
AP 〗 将乇法正 $1 (V ^我 fH 含 f 連用 s * 喊 or = t : irvte , 忍沟代 H 
中龙用利伢的 G 2» 如粟只！璉用池密系不乘龙你的佳蓋 ，丐 
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如何向页 齑增加 M 搀 

既然 匕经 链接到 Google Map AP ] ,就可以通过 JavaScript 得到 Google Maps 的所有 

功能。不过，我们需 ® —个地方容纳 Google Map ， 为此要定义一个元索来放罝地 
图。 



膝 

承參 


<body> 

<div id^ P1 1 o c a ti on ，T > 

Your location will go hen 
</div> 

<div id — 11 di s ^ance '* > 

Distance from WickedlySmart HQ will go her«. 

</div> 

— 電廪说 & 我们 6 铉存 

中宏义 5 — 曲样式，将咖即 
B ^ 4i>i>p X X ^OC^iK, 兩总节一个策急 这拽。 


<div id="map u > 
</div> 

</body> 

</html> 


准蚤创建一个 地搀…… 

要创建地图，我们需要两样东西：纬度和经度（我们已经知道如何得到这些信息 ） t 
另外需要一组选项来描述希望如何创建地图 D 卜*面先看纬度和经度。我们已经知道 
如何用地理定位 API 得到韩度和经度，不过 Google AP 〖希望讳度和经度包裝在单独的 

对象中，要创建这样一个对象，可以使用 Googk 提供的一个构造 函数： 、 构逢基衆右 

f # 屬 <写* 


var googleLatAndLong = new google . maps . LatLnqflatitude , longitude ); J 

M a ? sAPI ^ 蚺奄汸法爾砀 f 矗數.它取我们的 鉾度和 轻度， 

w 切一个斜的象 t M 中同的包含鋒度扣錄 A 。 

Google 提供了一些选项，可以设罝这些选项来控制如何创建地图^例如， 

可以控制初始地图视图的放大或缩小程度、地图在哪里居中、地图的类梨 


(如道路地图、卫星视图，或者二者兼有 ） ^可以创违这些选项如下： 

: zoon ^ ii 砀芍以推宄玲 0 的一个徭 。 巧 k / ■用不两的你當试 一下 : 较丈的盘的右进 
™r mapopti 賴叫 / 嫩 ( 翁 ㈣ O 的）。左 " 賴。 

zoom ： 10, ill 4 我们 制劍逢的扣对象。我们 




4 f 地® 存达个夸中 


}； 


c e nter ： googleLatAadLong t 
mapTyp 在 Id: google .maps .MapTypeld. ROADMAP 这芍 W 试试 SArm^UTET 如 

作鈞迳个 H 珀 d 
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显示地图的代码 

显示斑® 

下 [ SI 把所 fV 这些代码放在一个新函数 showMap 中 t 这个函数取一组坐标，在 
你的页面上显示一个地图： 



脱离跑道 

临时转向 


var map; 




function showMap(coords^ { 广 

var goog^leLatAndLong = 

new google,maps.LatLng{coords.latitude f 


coorda. longitude); 



var mapOptions = { 

10 r 

center^ googleLatAndLong t 
m&pTypald: googla.maps.MapTypeld.ROADMAP 


M ooords. ^ 象 tttlMitnJe 和 


"… 用它 f] 来刦 i — 个 google 


用我们 4 望的蟪®淺硇釗 


)； 

var mapDiv — dacumen n t.ge'tElemen j tById{ M iDAp M } ; 
map — new google.maps.Hap(mapDiv, mapOptions); 


㈣ —晰雖 


H IL ^ om 毅敌执叩 < dLv > ，挹它和 
n ^ opoptio^sfl (1 1} Map 构淺遂教，釗逋 
9cogkM^^-M 呻为象 。 这倉 4 我们面泰 
X * S ^ ® a 


把这个代码增加到 JavaScript 文件的殽后面。现在我们只需要把它与现有的代码联系 
起来。下面通过编辑仏$?13¥：10。31：：10：1函数来做到 ： 

function diaplayl*ocatlon{position]i { 

v^ar latitude = poai^ion. coords, latitude; 
var longitude = position .coords. longitude; 

var div — doc umenl^. ge'tElemen t By Id (** location 11 ) i 

div, inner HTML = "You ar« Latitude : f, + latitude + ,f , Longitude ： M + longitude ； 

var km ^ comput:eOistance [position. coordsourCoords); 
var div = do cum@ nt. getZlementByld ( Tl di s ta nc e M ); 

distance.innerHTML = "You '* + km + ,T km from the WickedlySmart HQ' f ; 

更新否 ® I : 的 it 的 <cUv>;il 后， bLd UpUwtu?i^t® 

ahowMap(poaition.coord#); ^ sh ⑽ Mff? 
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试一试迖令新显示 


一 W 


我 3 车孚的沄赛存 
34.^0^2. f JO , 5752 ^ 0 去 
钱你也 gttftit 他他方。 


饬&的存望这个在通翥 
迫仿.的 tl H 库噁？ 


4线测该： htt^y/wUlfied Ly smart, com/hfhtnds/c hfl|iter5/m,ffp/i^y u?c r htkvd 


确保 d 经增加了上一页的所有代码，另 
外向 HTML 增加了新的 map <div>* 然 
后重新加载你的页面，如果浏览器可以 
确定你的位置，你就会看到一个地图 & 


{it 戧们的弟 

CyDOi^t Mflpr 
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增加一个 i'oogi.. r id 

加一个大头饤 . 

如果可以准确地看到你在地图上的位置，就会更有用 & 如果 
你用过 Google Maps ， 可能对它使用大头钉标记搜索项位置 
的做法很熟悉 & 例如，如果你搜索华盛顿西雅囝的太空针高 
塔 (Space Needle ) ,就会得到一个地图，其中在这个城市 
靠近太空针高塔的地区有一个大头钉，点击这个大头钉，会 
看到一个信息窗 P , 其屮会显示有关这个搜索项的更多详 
细信息^嗯，大头钉也叫做标记 （ marker ) ,这是 Google 
Maps API 提供的众多特性之一。 

要增加一个带弹出信息窗口的标 I 己，需要编写一点代码，闶 
为你必须创建这个标记和愔息窗 n ,还要增加标记点击事件 
的处理程序（它会打开这个信总窗口） D 因为我们只是临时 
转向，所以只会简要介绍这个内容，不过，既然已经读到这 
里，你应该已经掌搌学习这个内容所需的全部知识了！ 



** 15 爲嘉肉 


219 4Hi A.wnuB North 
WA 轴 1 的 

cam 

—n nsi^ws 


It 




ri 


Dirtir^inns. neia^bv Savm In 

MmjmmrnF' 

Mm -U 


Id 



右 q 如 gLuMiJiT ^ 中搜 f ^ 砩的 f 你食委 
个釭毯的丈共巧栘记搜索结摩錡在的 9 


①蓄先创 建一个 新旮數 addMarker , 然后俅 fflfroogleAPIfei 遵一个标记: 


HddMPiHeer 基數觀一个地 圉 T —个 go 叫卑式的蚌度和 
a 杉.记的杉拯 ， 以迈的一 嶝内銮 



function addHarker(map, latlong, title, content) { 
var markerOptions = { 
position r latlong, 

4 一 个 # 记苟点击来敏 ) 滄 ^ 个吋象 …… 

map: map, 
title: title < 

. 疼为我们舞望東 

clickable* true J 违这个大共打的敍够悉孑一个馆兔 $ G 4 


var marker = new go ogle. maps. Marker (marker Dpt ions); 

\ 轉后璉用 A 郎 gUAPf 茲供的另一个构逢產爱釗建 
对瘳. 4 入戏们 #J 達 的他 ffir ^ rOptUn ^^ ―象 。 
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A 脱癟跑谨 

1瞄时转尚 


② 


接 T 采.定义特定子儐患 f o 的一@选项，来创逢达十信息窗 1 ?， jKfiffiftooglcAPI 
# 13t - 个新的 UifoWfwiow 对枭。掛 7 5 的代码增加到你的 addMarker 凾数： 


覷承參 


function addHarker (map r 1 at long ^ title / content) { 

T < r — . 戧们 级节省苍荔悌 (少用 墊紙,扣应吆也秸 


少 欲巷相 . 

v&r infoWindovOptIoaft = 
content: content, 


tT 


现杏屢巧 fl 臬 t o 定义一些 洼 砩 


线们 ii 为睿 ■， 


position; latlong 


g 有部度和 《 A , 


}； 


var infoUindow = new google. maps, InfoHindow (infoWindowOp t iona) 

用它乘釗逮儐&密 O , 


googl« ^ maps. event, addLl^t^ner (laarker, ,T cIick'% functiont) 

t 

命益巧老传八■—个 dj 數， 

}) f - I 用户点击杉识的弒金谓用 

这个蟲 


infoHindow. op«n{map) 



点击杉记时. 含谒用 a 个备數. 
在祕匣 Jt 打矸馆,&东 C ?, 


馗下來值用 q ⑽ gLe Mflp ndrfUsteiA ^ K ^ ■：$ 
走寧畔 ‘加一个 1 嶙老 • 。益岣色 
鱿薄一个 it 理荇瘩_炎 U 镝衝 6 m 过的 
Q^Uac^ib 


(D 规在 S 倣的轼虽认 showMapySffladdMarker &&* 菜搞保为这 4 个行参 fS 入 3 iE 徠的 
实参。 将达令 代码增加到 showMap &数的最 T ® : 


v 摹 r title si ^Your Location"; 

var content = "You ar« h«re: ■，+ coorda.latitude + " + coords. longitude ； 


addHarkor googleLat:AndLong f title r content); 


( i 入迻用 ^ i >0 ^U 吓 s AP 彳釗逮的 ntap 和 
QM0ULOtA^L^^0 ^ $. …… 


……和一个杻遞專. 以苁杉 ■记的一个肉容漆 
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1B? 




更多 蚶 


测试标铊 





增加 addMairker 的所有代码之肟， it 新 showMap 来调用 
addMarker , 并重:新加载页面。你会看到 十地图，而 
且你的位置上有一个标记 D 

可以 试着点击这个 fcU , 会得到一个弹出窗 n , 给出你的 
结度和经度。 

这很棒 T 因为现在你能淮确地知道你在哪里（万一你迷路 
了或者出了什么状况…… ) 


各 a 

脱癟跑谨 
临时转 

» J 9 


运竑 4 我们的砲 W. 包當 
杉记和強出的缯 £ 窗 o. 



4 铐测 试： httpy/wicj^ Lysm-flrt. a^te r5'/v^a r^r/HAy U? 。 上 t wU 


ID Google Maps AP 丨还能傲 

另外 ^ 些很酷的事惰 

使用 G ⑽ gle Maps AH 可以做很多事情，我们只是稍稍触及皮毛，尽管这个 AP 隨出 
了本书的范畴，不过，如果你能 S 己深人研究会很有好处。下面简要介绍一些工作， 

你可以考虑用这个 API 完成这些丄怍，这电还指出 f 可以从哪 取丌 姶。 

控件： 默认地，你的 Google 地图会包括很多控件，比如缩放控件，平移控件、切换地图和卫星 
视图的控件，甚至还会有街最视图控件（缩放控件上面的小人图标）。可以从 JavaScript 通过程 
序访问这些控件，在你的应用中使用 d 


服务：在 Google Maps 中赍找过方向吗？如杲有过，说明你已经用过方向 (Directions) 服务 D 
你可以访问方向以及其他服务，如通过 Googje Maps 服务 API 访问距离和街区视图 u 


覆盖： 覆盖会在 Google 地图的上面提供另一个视图，比方说. 一个热 图覆盖 a 如果你正在 路上， 
可以用交通覆盖来检查交通阻塞情况。使用 Google Maps 覆盖 API 可以创建定制覆盖，如定制标 
记、你的照片_以及你能想到的任何具他东西^ 


所有这些都可以適过 Google Maps JavaScript API 得到^要进_步诫验 T 可以查看以下地址提供的 
文档； 

ht tp : //code ■ google ■ com/a pis/in aps/document at ion / javascript / 
















^9 蚰珙袞位内赛隹:孥 


本周访谈 

与一个想有所作为的 HTML 5 API 的对话 



Head First : 欢迎你，地理定位。我得先说一句，能 
在这里看到你我真的有点奇怪。 

地理定位： 为什么呢？ 

Head First ; 你甚至不能“正: ^ 算是 HTML 5 规范 
的一部分，但你居然在这里出现，要知道我们第一 
次专 H 用 - 审:来介绍一个 API , 而你竞然就是我们 
第一个要介绍的主角！怎么会这样？ 

地理定位： 嗯，你说得对，我确实是在另，个规范 
里 定义，而不是 HTML 5 规范，不过我真的是 W 3 C 
的官方规范。另外，你吋以四处看看，所有那些数 
得着的移动设备都已经仵浏览器中实现 T 我。 我是 
说，如果一个移动 Web 应用没有我还能有什么意义 
呢？ 

Head First : 那么哪些 Web 应用会用到你呢？ 

地理定位： 实阮上，人们在移动中使用的大部分应 
用都会用到我 t 从允许你更新状态并包括地理信息 
的应用，到记录照片在哪里拍摄的相机应用，再到 
查找当地朋友或者允 m 尔在不同位罝 ** 登彔" 的社 
交应用，你都能找到我的身影。嘿，人们甚至用我 
來记彔他们在哪里骑车、跑步、 m 餒或者 f 解他们 
要去哪里。 

Head First : 你的 API 看起来有点简单，我的意思 
是，你总共就只有这么几个方法和域性叫？ 

地理定位： 浓缩 I 是精华。你见过有人对我抱怨 
吗？没有吧！我花了很久來了解每个开发人员需要 
什么，也知道如何建立位罝惑知应用。另外，小就 
意味着速 度快， 而 1=1 容易学，不是吗？为什么把我 
选做第一个单独用-章来介绍的 APi , 可能就是因 
为 这个原 因吧？ 


Head First : 我们来谈谈支持情况。 

地理定位： 这个话题没什么多说的，因为几乎每个 
浏览器都支持我1不论是桌面浏览器还是移动浏览 
器， 

Head First : 好吧，有一件事我一直想 问你： 如果一 
个设备上没有 GPS , 要你有什么用呢？ 

地理定位： 这里存在一个严重的误解，以为我多少 
会依赖 GPS . 如今通过蜂窝电话三角定位、使用 IP 
地址等可以有很多很棒的方法来确定位置。如果你 
有 GPS , 那当然好，实上这样我就能提供更大帮 
助。不过，即使没有 GPS , 还是有很多办法来得到 
位置的 D 

Head First : 更大帮助？ 

地理定位： 如果你有-个足够好的移动设备，我可 
以告诉你纬度、方向、速度，诸如此类的信息我都 
能提供 

Head First : 假设所有这些方法都不奏效，也就是 
说， GPS 、 IP 地址.三角定位都不能用，你还能做 
什么呢？ 

地理定位： 嗯，如果是这样，我不能保证你总能得 
到一个位罝，不过也没关系，因为我会提供一个很 
好的方法来妥善处理失畋。你要做的就是给我一个 
错误处理程序.如果我遇到问 S 就会调用这个错误 
处理程序^ 

Head First ; 太好了。嗯，我们的时间到了。谢谢 
你，地理定位，惑谢你来到这里， 也 祝贺你荣升为 
一个具正的 W 3 C 标准 D 
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: —-t 定有迖 3 个属 传： ^ 
™ 4, 经廑和 



coords 
timestamp 


尸 

我们 S 绞扣过中另外 
这有一个屬伐，萁中老含釗速 (| 个 
pdtUm ^) 象的的间。 这爿子7弒迖个佶1 的琿 
矜琢有用 . 3 


Coordinates 


latitude 

longitude 

accuracy 

attitude 

aftitudeAccuracy 

heading 

speed 





地理定位 AP [详解 


爯来看 M 理定伎 API 


我们已经对地理定位 api 有些 r 解了，可 a 确定自己的位置，计算与 
其他位罝的距离，处理 API 的错误状态，甚至使用 Google Maps API 增 
加了一个地图。不过现在可不是休息的时候，我们刚来到这个 APi 有惫 
思的部分。另外，这也是一个关键的节点，在此之前，我们只是了解 
这个 API , 而过了这个节点，就开始转为掌握这个 API , 所以继续努力 
吧！ 

继续前进之前，我们还需要做一件事，再来仔细分析这个 API 本身 D 
我们已经讲得够多了，不过还从来没有真正看过这个 AP 1 d 就像前面 
一直说的，这个 API 确实相当简单，只有3 1 

个方法： getCurrent Posit ion (這 个方 
法的作用你已经知道）、 watchPosition 
(很快 你就会 r 解） 和 clea rWatch <可以 
猜得到，这个方法与 watchPosition 有 
关）。 介绍这两个新方法之前，再来看一看 
ge tCur rent Posit iorv 和一些相关的对象， 

如 Position 和 Coordinates 对象。你会 
发现之前你不知道的一些新东西 & 


Geolocation 

getCurrentPosition 

watchPosition 

dearWatch 



ii # 方硪運定沄抟茯钍理杈存舍存到 «1乇法 綠宠萁 
ap 争蔀分] 倍燃的 _。 MBfUl 料充 

很多®因导 致是珀 碥定治轚。 


getCurrentPosition (successHandler, errorHandler, positionOptions) 


成功钍 m 呈厚 (咸範试 ）令旮 礒定话 
1炉 U ? 用， 拉’考入一 个■爿寒夺 


^ 71 


这 f 汪苟一个沒用过的参教. 利用 a 
个誊數巧以谪整嘁理 t ( 会的行的。 



我们知道锦皂和绍度^不 
a 餘3达 ® 


有 迖备 
枝 -1 

他 ttt 
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玎乂谈谈你的糖寰码？ 

査找位1!并不是一项精密科学。裉据浏览器使用的方法，你可能只知 
道你所在的州.城市或街度。另外，利用更髙级的设备，可能会知道 
精确的位置，也许误差不超过10米，还会提供你的速度、朝向和商度。 

在这种情况下 5 我们如何編写代码呢？地理定位 api 的设计者与我们制 
订了一个很好的小 约定： 每次他们提供一个位置时，迅会提供这个位 
置的精度（单位为米），可信度达到95%。所以，例如我可能知道位 
置稍度为50(】米，这说明只耍考虑到半径500米，完全吋以确信我们的 
位置落在这个半径为500米的范围内。精度为500米时，我们可以给出一 
些可靠的建议，比如正在哪个城市或街区，不过要提供 H 体街道的驾 
车指示可能不太 合适。 无论如何，显然要由你的应用来确定希望如何 
利用这个精度数据。 

说得够 多了， 下面来看当前位 S 的精度是什么 D 你已经看到，粮度 
信息是 coordinates 对象的一部分。下而把这部分信息拿出来，用在 
displayLocation 函数中 ^ 





实现位置感知 


級 


♦任 麒承 


function displayLocationtposition) { 

var lanit:uide - position, coords. latitude; 
var longitucle 二 pos it ion. coords, longitude ;■ 
vax div = document. + getElementByld XocatioriL ，T ); 


div.innerHiMI. = "You are at Latitude: T _ + latitude + Longitude ： - + longitude; 
div. InnerBTML += T, {with " + position,coords. accuracy + ” meters accuracy) lf ; 


■positnecur^c-y ^ ft, 
岛 (i 加 ^ < div> 的 [ 此叹 rHTML 的末屢 . 


var kin = computeBistance (position.coords r ourCoords); 
var div = document. getElementById( "distance -1 ); 

distance.irmerBTML = "You are " + km + ,T km from the WiekedlySniairt 


showMap (pos ition. coords); 

} 

试一试精芪 系 

确保把这一行代码增加到你的代码中，并加栽页而，现在你可以看到 
位罝的精度如何 & 一定要在你有的所有设备 h 都试一试。 

在线谢试： kttji : //wUk£d Ly si-vLfl rt. comytifht vu.i5/&h a^ttrS/a cou. o y / ^ tj 



你现在的位道 > 191 





跟踪 1 


这句话的出处很有争议。有些人说真正第一次提到它是在电影 
«Buckaroo Banzai 》 中 T 另外一些人却说它出自禅宗佛经，还有 
一些人从不同的书、电影和流行歌曲中找到它的出处 D 不管来源 
是哪里*总之这里会用到它，甚至在这一章之后还会更多地使 
用，因为我们要把它变成一个小 Web 应用，名字就叫做 u 无处可 
逃” 没错，真的有这样的一个应用！不过，我们还需要你（读 
者） 的一点参与，你必须抬起屁股（请原谅我们这么说）站起 
来，到处走走。 

我们要做的就是扩展当前的代码，让它能实时跟踪你的移动。为 
此，我们要把所有内容集成起来，包括地理定位 API 的后两个方 
法，创建一个可以实时跟踪你的应用。 



4这泳等论中伤站4噼一这? 


如何路踪你的移劫 


前面已经提醒过，地理定位 API 有一个 watchPositicm 方法 a 顾名思义，这个方法 
会监视你的移动，并在位 S 改变时向你报告位 watch Position 方法看上去确 
实与 getCurrentPosition 方法很像，不过行为稍有不同，每次你的位置改变时 
它会重复调用你的成功处理程序 Q 下面來看它是如何做的。 




浏览器 




(^\ 你的 ifi 闳谪两 wafchPosiffon, 
w ft 入 - 个成功处數， 


( 2 ) wateKPosftloii 在疟 
w fe 不断霡视*你的 
位 1 。 


watch?os 〖 fton 鱅逋 
w 麄银你酌忮 1 (# 
尚成功处瑾我序雉告 > , 
£ 至你请用 elearWatch 将 


fg\ 你的位 8 改交 
w 时， watehPosEtlon 
m 两成踏处來 m 
告你鈐鮪饺 i P 
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实现遞 ~ 


启动应阁 

我们要以前面的代码怍为起点 T 首先向 HTML 增加几个按钮，从而 
能开始和结束跟踪你的位置，为什 么需要 这些按钮呢？嗯，首先， 
用户并不想-直被跟踪，他们通常希望对此有些控制，不过除此以 
外还有一个原因：不停地检査你的位置对干移动设备来说是一个相 
当耗电的操作 T 如果一直打开跟踪，这会严重影响你的电池寿命, 
所以，首先，我们将更新 HTML , 增加一个表申.和两个按钮：一个 
用来监视你的位置，另一个用来停止监视。 


<^doctype htcil> 

<head> 

<mata eharaet* T, utf- 8 °> 



农 ㈣ 踉踪用户 P 挝非常耗电。一定 fii 
用户栊供悉出 Dfit 任龈躂，另 
外注*謹供极在的一墊控# n 


< title>Wh«^evec you go, therv you ace</title> 


<script 3 rc =>i myLoG ， j s"></acript> 


<link rel— 1 p s tylesheef f href5s T, myLoc + css 1f > 

</head> 

<body> 

<£ omi > 

<input type= ,T button T, id^"watch” vaWatch mm' f > 



簌们 fl 加个表单无棄►龙 
中名括采个麴枉，—个用瘃 
名鉍诞视, 碰此' 

另一个用来涑餘，棵， W 


cinput id="cJL»acWatchK value^"Clear w»tch”> 


</form> 

<div id="location* f > 


Your location will go here. 


</div> 



<div id=' 1 di s t,anee TI > 




Distance from WickedlySmart: HQ will go here. 


</div> 


我 1 H 龙重用琢卑钓 < dlv > 
艰告宕时 Gift J&,. 


<div id= T， map M > 
</div> 

</body> 

</html> 


稍 MiB 令 w $4 .忘 
qcpgUtfe ®. 
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使用 ^atchposition 


谪整原来的代码••… • 

现在需要为这两个按钮增加点击处理程序 D 只有在支持地理定位的情况下我 
们才会在 getMyLocation 函数中增加按钮点击处理程另外，由于要用 
这两个按钮控制所有地理定位跟踪，所以要从 get MyLo cat ion 删除现在 
的 getCur r ent Posit ion 调用 & 下面删除这个 代码， 再增加两个处理程 
序: watchLocation 对应监视按钮， clearWatch 对应清除 按钮： 


如果别支4他 if 定佬. 則我们食坩加狯 is 点击钍 理枝淳 


釦杲不友#祕理定 n 剡准灸 湲墊钍 理沒埤4无意义. 


function getMyLooation () { 

if (navig&toir,g«c>loc a tio n) i 

rTavlgator J .geolot;at:ron.yeLGurrqntPosition(diapIa^Luca-tion / di3playitm?r); 
var watchButton = do^unwnt. getElementById ( u ««tch f 1 >; 
watchBut ton. one licit — watchLocation 

var clftartfA^tchButton « document.9*tEl*m«ntById( IT cl«arffatch TI > 
cieaijrfT&tchButton.oxieliclc = cl««^1Vatch; 




) 

else 


alert ["Oops, no g«olacation support") 



晷 -il ^0 watah L^c«tbkv 
采 J 刼益视 ， ■ 

it 鉴视。 


编写 watchLocatton 处理我序 

目前，我们要做的工作是:用户点击监视按钮时，他们希望开始跟踪他们的位罝。所以 
我们将使用 geolocation .watch Posit ion 方法开始监视他们的位置。 geolocation . 
watchPosition 方法有两个参数，一个成功处理程序和一个错误处理程序 T 所以我们将使 
用原来已有的两个处理程序。它还会返回 _ fwat C hId , 4以在任何时刻使用这个 id 取消监 
视行为，我们把这个 watchld 放在一个全局变量中，为清除按钮编写点击处理程序时会用 
到这个变量。以下是 watchLocation 函数和 watchld 的代码 T 把这些代码增加到 myLoc . js : 


var watchld - null ； 


4 if 牛 *1； 面坩加为一个 f 居 tf a 我0把6初姑 ft 冷 
以后迳電龙迖个 if 滇除装視 


function *rat chLocat ion (} { 

watchld = n avigat or, ge oloca t ion. if at chPo s it ion (di spl ayLo cation, 

di spl ay£rror); 

} ’ 


i 费用 watcMPt^Ltlo 八方法 , 入前©鵠写的咸功公理炫璆 
dU^LaijL^catw^ib 现有的 梓滇处遝忮 4 diU^^rrDr, 
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編写 clearWatch 处理程序 

现在来编写处埋程序清除监视行为。为此需要得到 v ^ tehld , 并把它传递到 

geolocation , clearWatch ^7^ 0 


实现位置感知 


膝 




J 






function clearWatchO 场係有 — 个 wfltehEd , 核后 *■ 

if (watchldj { 

navigator, geo loc ati on.clea rWatch (watch Id )； 
watchld — null ； 

) 


1 …” 谈兩 0 從 Uc^tio kUCUfl 
方法 ‘ f4 入 a 个 wntci^d 。这贪钵 


还熏要对 displayLowtioK 傲一个小小的更新 . 

还需要做一个很小的修改，涉及前面编写的 Google Maps 代码。在这个代码中， 
我们调用广 showMap 来显示 Google Map 。 showMap 会在页面中创建一个地图， 
这件事你只希望做一次。不过，要记住，开始用 watchPosition 监视你的位 
置时，毎次位置有更新时都会调用 displayLocatioru 

要确保只调用一次 showMap , t 先査看这个地图是否存在，如果不存在，则凋用 
showMap 。 否则，说叨 sho _ ap 已经调用过（而且已经创建了地图），所以不需 
要再调用这个函数了。 


function dispiayLocation<p q sition} { 

var latitude = position .coords. latLitude; 
var longitude ^ position, coords. longituda; 


var div = document,. getElementByXd (' r location ta ); 

div.innerHTML * "You are at Latitude ： T, + latitude + ", Longitude; n + longitud*; 
div.innerHTML +- n (with '* + posit ion .coords .accuracy + ■’ meters accuracy) 11 ; 


var km = computoDislian^Q {posi-tion. coords f ourCoorda); 
var distance — documa nt. ,get£ 1 ementById( IT distance r> ); 

d id t a nee. inner HTML = ,T You ar@ " + km + f, Itm from the WickedlySmart BQ n ; 



if (map == null) { 

(position, coords); 




如果用 shmvM % 时谈用这个蠱盘，歪时不乘 
Jf # ik tl 用 <p 用 e 


你现在时位盥卜 1^5 




测试用户 


动起来 f 





确保巳经键人 所右新 代码，井東新加载你的[面 myLoc . html 9 现在，要想真 
止测试这个页面，还需要“盘新定位”，更新你的位置 # 所以你可以散步 * 骑 
车、开车》或#使用你喜欢的仟何交通方式 & 



不言而喻，如果在你的桌面浏览器 t 运行这个应用，肯定很没意思（因为你不 
能带着它移动> ,所以完成这个测试确实需要使用一个移动设备 a 另外 t 如果 
需要帮助，则希望利用你的移动设备访问一个托管版本，很髙兴地告诉你，我 
们已经把这个代码的一个副本放在 

httpiZ/wickedlysmart^om/hf htrnl5/cliapter5/watchme/myLoc.html 







m otci 个嬙® — £在 
f 含的初始仿 S 房中-…” 


存 M ® 试： kttji ： //wbJ^ Lys mart.co L^.ktkvd 
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: .v 二 • v. ~ .. v ： ： . ~ r~ ,: Utinib - 

■ _ -m- - . ■■ ■ -— : ■ ■ ■ ■ •■- f % 

^MwatthPositionSj 厂 mife 么 




率提供位罝更新呢 q 


是不. 能控制 ㈤ 览器会:参定最 Jt 的史新 m 率.，并 : - 

, mm ■- - " ■ ■ ■ m _.■■■■■■■■■.■• mmm ■ ■■_«■■ ■-■>«■.• ■ 

:)::: 减笔你佧么: Bt 块改蛊了祛笨。 _ 

■ *' - ■. '.■■■•_ ■一 •/ _■ ■ ■ * ■■- - 
■ ■ ■ - • . — ■ ■- ! " '■■ , _ .. .... 

我第二次加栽页面时,尽 e 我只是 *1^ 坐着;为仟 

: 么 我的俾置会改变銥 / tk ? 一二 . 」二:人； 

-"■ ■ ■■■■■ ■-■ _ ■■_••_■■■ • •- ■. 

■ _ ■ - ■ ■ * - . * ■ ■ _ 

要■记住,我们说_过对览器 _ T 能.使恥好几种 f 法 来确定 ■ 
你的位 置 - v •对不对？ ^据辦览器碲宅 位置所 JI 的方法（或 
. J 多种方法> v 位置的精冬会随时軋改龙 T : 一般来评 x 神度 
会越来 越高^ 不过弃时 方如二你禾车进人郊区，，那里 
只-有一个电古■基 站) ■_，精度也能变糟。不管怎样都能使- 
丸 position . coords 对象中的 accuraijy 属性来监视蜻度， 

闲 * 我能使用 eoorcMnates 对象的 alHtude 和 
altKud eAccu racy 腐性吗？ 


>=T= 一: 

会'得到 i 持…(显蚝 .只在 一.些 ^'4 ^' - 
动设备上支持 ) 「 所以必項确译代码填輕右支持达座 a . 

: ft 的 情沅公 d : . 

-二 j . 

i ™* ( heading ) 和速度 ( speed >；萆什么？ j 

- . ■• ■ _ ■■• •_ % ■■■■_•■• . . ■'. … 

等 r : 朝向故羌你括进的方 ㈣ T : iii 滅你巧快化 .政 

设俾 it 在第5洲‘么路上以幻 m / h 的速度向北驾苯衧滅 ， W 

」么你的相向被是乒：速度是你禽在车吴， 而丰 

停^專匕克咖咁忮的停车场.，那么-你的速度就是0, _而1浞 

有柄^ ■目为你没有#动）______ ""- r " ", 

一 

■ ° _ ■ V* _ ■ ■ ■ ■ 

r^Tr 在地■上确定我的位置到你的位置之彳可的距离时 ， 

比这个应用报告时距离长得多，为什么呢 r 

要记住我 fa ■的版离函数只是计算 '笔直_的距离 ， 
而地图 工其很 可能会给出行牧距离 . 


F ~ 


^^rpen y 赃 pencil 


下面给出 dbplayLocattOFi 釣一个候选实现。你 能猜出 它做什么吗？ 
仔细看一看，在下面写出你的答案 > 如果你 • 爱 S 险，还可以动手 
试一试！ 


distance .inner HTML 
if (km < 0.1) { 


’Yon 


ki>. “ 


•km~f J-Oni~the 


idiySiiiart HQ 1 


distance,innerHTML = "YooiVire o-n M ; 

else { 

if (prevKm < km) { 

diBtance.irm^rHTML = "You r re getting hotter? 1 %- 
} else { 

diatance.innerHTML = '^You're getting colder. . 


prevKin = km; 

a 这 f ® ttii 个代 


你现在的 位罝* 
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回顾- 

你有一 些选项…… 

到问 削为止，我们一直都避开 rgetCurrentPosition (和 watchPosition ) 的 
第三个 参数： positionOptions 参数 a 利用这个参数，可以控制地理定位如何计 
算它 的值。 T 面来看这 3 个选项及其默 认值： 



var posifcionOptions = 




茗先有一个屬 性启用 惠枰度 ，相 
后含介绍意溪 …… 


enableHighAccuracy: false, 


timeout: Infinity, 



ti 糾 选 场全 粒制洌铱赛鉍 t 的时问 D 软认 
祕.这说 i 片 UvflMty . 表芳到 UB^Jki 用辦宠的 
仔意时冋柬得 f ) 括 


maximumAge: 0 



&后, ^ t , m . umA 0£ 选域设墨）―个&鼉的最丈 年 
鈐 — 趁过这个珥钤忘钶览磊電爨重靶#爲仿裏。较\ 
减: a 个 a 谉伎筠 o . 表矛别篼磊慧 I 震 f 驴鴒益仿 
i et ^ tivrcvutpositkn ^ 的部 5 笔納 0 S ) 。 


3以把达卞选场 f 若鳥一个鞏糾普汰“ 
- &含给洌 ® 器1£>#的时闸.乘杳找亡 g 盃 
这个咖 m 朗姻. 齡侧 ■ 



能苒谈谈你的鞲度码? 


我们已经见过，地理定位 API 交给我们的每个位置都有一个精度属性 D 不过，还可 
以告诉地理定位 API : 我们想要它能得到的鉍精确的结果。0前，这对于浏览器 
只作为一个提示，实际上，不冋的实现可能会对这个提示做不同的处理^尽管这 
个选项听上去小太重要，但它确实有很大影响。例如，如果你不关心结果是不 
是超级精确，你可能只想知道用户在巴尔的摩一地理定位 API 可以相当快地 
告诉你，而且代价很小（从耗电角度讲） D 另一方面，如果你需要知道你 
的用户在哪条街上，这也没问题，不过地理定位 AH 必须启用 GPS , 耗费很 
多电来得到这个信息。利用 enable High Ac curacy 选项，你可以告 Uf 地理 
定位 API, 尽管代价很大，但你确实需要所能得到的最精确的位罝。要记住， 
使用这个选项并不能保证浏览器总能提供一个更精确的位置。 
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下而再来考虑 t imeout 和 ma x i muraAge 选项是什么： 

timeout: 这个选项告诉浏览器确定用户的位罝要多长时间。需要指出， 

如果提示用户批准》个位置清求，在用户接受之前 timemU 计时不会开 
始。如果浏览器在 tmiemit 指定的时间内（毫 秒数） 不能确定一个位置， 
会调用错误处理程序 6 默认地，这个选项会设罝为/ 咕 以0^ 

maximumAge: 这个选项告诉浏览器一个位罝可以有多老 D 所以，如果 
浏览器有一个在60秒前确定的位置， rfrimax〖mumAge 设置为90000 <90 
秒）， getCurrentPositicm 调用会返回现有的巳缓存的位罝 （浏 览器 
不会尝试去得到一个新位罝） a 不过 T 如果 maxiimimAge 设置为30秒，就 
会要求浏览器确定一个新位置。 



IS 时和最大年故 . 


实现位置感知 

务 1 





/ 这么说，通过使我 
^ 裼 安玎认谁螫澍览 S 多长 H 闳再重新计 
( 苒成碥定我的位丨，我能蘑出采，值用 

I 这个逸項玎吆让我的瘅用速度噩扶 、 H 

0 V 省电，厍么除布 f + 么改 


你对 maximumAge 的理解很正确 D 对于 timeout， 可以这样 
考虑》 使用 maximumAge 时，你会得到一个老的（缓存的） 
结果，只要这个结果比你指定的 maximumAge 年轻 t 这对 
于优化应用的性能非常有用。不过，如果位罝的年龄超过 
maximum Age 会怎么样呢？嗯.浏览器会放弃，努力去得 
到一个新位置 s 不过，如果你对此不太关心。如果有一个 
新位置，当然很好，你町以得到这个位置。不过，如果没 
有，你并不要求立即得到。在这种情况下，可以把 timeout 
设费为0,如果有一个结果通过了 maximumAge 测试，那么 
太好了，可以使用这个结果，否则调用会立即失败，并调 
用你的错误处理程序（错误码为 TIMEOUT) ,用 ti 辰 cmt 
和 maxi mum Age 调整应用的行为可以有很多有创意的方 
法，这只是一个例子。 


你现在的位董 ► 199 


使用地理定位选项的练习 


嫌 

下面可以看到地理定位 API 的一些选项。对于每个选 
项，请与它的行为连连看。 



{znaximuinAge : 600000} 


我只想要年龄小干 m 分钟的缓存位 
置。如果没有小于10分钟的缓存位 
置，则我会请求一个新位罝，不过 
前提是在 | 秒之内就能得到。 


{ : 1000, maximmaAge : 6000 00} 


如采浏览器有一个年龄小于10分钟 
的缓存位置，則我会使用这个位置， 
否则，我想要一个全新的位置。 


{timeout :0 f maximumAge : Infinity^ 


我只想要全新的位罝 B 浏览器随便 
用多长时间，只要能给我一个新位 
置就行。 


{timeout : Infinity, maximumAge :0 } 


我只想要缓存的位置 D 不论年龄多 
大。如果根本没有缓存的位置，我 
就会调用错 m 处理程序。不要给我 
新位置！我会离线使用 D 
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实曝 mML 位置雄 



如何滹定迭顼 

JavaScript 的好处之一是 T 如果我们想在一个对象中指定一组选项，可以直接在方法调用 
中将选项键人一个字面量对象。具体做法 如下： 假设我们希望启用高精度，另外把位置 

看 f } 5 °6 ? ^ 

軲千，咱 ， i 少戧们 这样认 


的最大年龄设置为60秒（或_00毫秒）。可以如下创建 选项； 

var options = {enableBighAccuracy i true, maximuioAge: 6QOOO}; 


然后把 optionsf 专递到 getCurrentPositioni ^ watchPosition , 如下 
所示： 

na vigatior. geol oca*tion .ge tCur r e nt-Fo s it ion (. 

dispIayLocation^ ftff 辟如邮变 % 



displayErr 


options); 

或者，也河以内朕编写 options 对象，如下所示； 
n^Lvig^at-osc* ge qIqc ation ■ t Current Po siti on：t 

di^playLocatrion, 
displayError, 

{e nab 1 e BighAc c uracy: trw« ; 


吁 W 昜到 iit 技术衾 ft 

Ca #4 tl % 存矗蛊 il 用 
中茑為一个章面 f 的象！ 

有呰人认办 ii 个代 疼更篛 

maximumAge: 600001 ); 知 ^ p 會 


既然已经紐蒼了选项 V 了解 f 它们做什么，以及如何指定选项，下面就來使用这些选项。接- 
F 来我们会使附选项，不过要记 住， 这些选项要用来閫整你的应用*而应用会有自己特有你 
需求 e 这些选项还会受你的■设备> 浏览器实观和网络的影响，所以你需要自己好好砰究研 

究# 


试 〜试该 断粒崔 


\i\J A ___ 


前面运行诊断时，你遇到过这种情况吗？你一直在等啊等，可是计么也没有发生！这很可能是因为超时设置为 
无限长 。 换句话说，只要浏览器没有遇到错误条件，它就会 一直等 掩得到 一个位 置*嗯，现在你应该知道如 ® 
修正这个问题，因 为我彳 以通过设置^爪的此强制地理定位 API 更务实一些〜政法如下: 


function watchLocation(>~ f 
— waEchld ^ navigator. geolocation, watchPoaition ( 

ditspl ayLo c &t±on, 
di3pl3LyError r 

^timeout ： 5000 ))-r 

] g 鉍试一试，汸矸以 st 玷译整 1 


^ {11 timZ & ut^SOOOi # 叫祕 

钭拯 If 不含 一 6 當谈珥科 一 个沄 S 『 


你现在的位贾 ► 
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以 ■查 着你挺 浏览器；缸多# 被副你釐 .Vi: 皇沭: 桌也 .有趣 f. 我苛 

： : ;；;：'取 尽賓 能给挪览器增加垒賴^::::?匕3.、 : : :1'^；.；%亡 .v rv : 

每 高靖度 Vi:::. ■: ■"：:■： •:春 

'.:. 砰起 i 午夸使用■缓存 ...! (设罩为0>:...。:./ . : ■ ■ ：.-.' ■ . ；■；■'■. 

■■■ ■%_ • ■ ■ ■ ■ _ _ _ ■ ■ ■ 

y :: _ ■先谏_ t.imept 荜项力削，’:. 然摩 每次 失- 败时再 枭力叫 meok -.H:..:. 

.:. 裔告 .:. 我们不知 it 是否所有设:备和它.们敗电池都..支持这 _ 样.廠_:. ‘：以锺/ 

■:， ... V用时矜险自负 K 卜. .:... 广 ..,.... ... 

: .‘ : f ;.: y . ㈣載_，變__|^0^.娜病 

£ 

_ - - - - ■ r ■一 ■■ : . - ■■■■_ : ■ . - ■ — Vr ■■ 纊 ■ ■■■ ■. ■ ■ ■ .-」■■ . r --: m ■ ■ ■■ ■ .■- ■ .■•■■，- - ■•- ■ i - 1 • 墨 . ■ ― • :. . - : ■. 


■. % . . ... _ ■■— f .,.. 

；'■; {enabl eHi ghAc cura cy 


■■■ ■ ■ ■- ■ ■ _: ■■■■■■ ■■••■■■■■；_■■■ ... V P_ :■ 1 ? - ■- 1 ^ — — . 一 •■、 • ■„•■■■ 

-:_ ■ ■ ■«— - rr — ~ ■ .. :： -- _ V- I ■. ■ ■■_•■•■ < ■ -rvl i ^ § ■ +' *' ■ ■ •. _ 


{ eal ^ iighAcciaracy : ; trui & / :七: Lnie 4 iti : 30p / 也类驿— 


璉茬棱途 T — 贡崧托〔妨会:爱规这很有意患 t 输人这些托藏;薄议把 它普 
接增 fiq 到掭如 r ^ ioci 與的 _ va script 代码的杏#设备试:, S 结. 
，果 记表在这里： ■■ .. V ... ::..乂 :…二二 〆 


—.•_■-•■■■’■ _ ■ • ...—_•• -W - - . ■■:.二 


上我到位_霑赛_ 


_ ■ • ■ ■■■ ■'■ - ■■: 

、、 ■:.■•■.••■• ■“■. ■■, ■ ;_ ■ ■ ■•: 〜 

'■. 」■/■■■ - ■' :' ■ , 

毫 tit 


上找到位置需要: 

, -I.' - ' 

■ J ■ ■- . ■■■::■■■, ■ ■■■.■■ 

上找到裣霄 mi 
W 到位置需要_ 


毫秒 

; . - ' - ' 

■■ ■■■ ' ■: - - - 

毫秒 


与 测试 h t ± p ：// wu £> fec ^ yrt ', ht^L ; 


M 2. :」语 b 宣' 一 



























实现 位置感知 




var options == { enobisBxghAccur : true, 'timeout: 100j, maximumAge : 0 
windov + onload = ge tMyLoc action; 
function getMyLocaticmO { t 化 il 场 ， ttntCowt ^\tDD ： 

if (navigator,geolocation) { m^dm^kuAgeAc 1 。 

navigator. geoloca'tion. ge tCu cr en t Po s it:ion ( 

displayLocation, Hi 鸟往哞一样 , dL 斗 玳‘和 

displayError, piUpLeryBrrcKl 巧成功和错 G li 違 程萍 . 

另外 4 入 qstbMft 与 M 三个参數。 


- 

■ 



options) ; 


else { 

alertf^Oops, no geolocation support T ， J; 


function dl sp 1 ayEr r or (error) { 
var errorTypes = { 

0: "Unknown error", 

1 " 11 Permxssion denied ", 

2: "Position is not available' 
3: "Request timeout” 

J ； 


酋光诠由抟沒 it 瑾沒蜱 


ijf 的代砝矗—样的 . 

/ 


var ^rrorMessage = error Types [error. code]; 
if Cecror.code = - 0 〖丨 error,code = 2) { 


errorMe ^ sa^e = errcocMessage 


error. message; 


} 

var div = document, tElemeni:ById{"location^); 
div.innerHTML = err o rMe s s age; 

options-timeout += 100; ^ - ——— 一 - ~ 

navigator ^ geolocation .getCur rent Posit ion ( 
displayLocation, 
display^rror, 
pp ' hi . ttFia .); 

div. innerHTML += f, …… checking again with timeout 


釦 I 迮现吏蛀. 油含， 
^ ^ ifo ^ OOY ^ . 疼后 4 

後。 男外还金让用户知龙栽们存 

t 後。 


options , timeout 



function displayLocat-ion (position) { 

var latitude = position.coords .latitude; 
var longitude = position*coords.longitude; 
var div = documen , t, getElementByld('^location' 7 ); 
div.innerHTML = "You are at Latitude: ,f + latitude 

T, , Longiitude : f, + longitude; 
div.innerHTML " (found in T, + options.timeout + 


> 


刑笵器成幼得刊你的佳迺的.蔌们 衾让用 户扣漥花？多长的间 。 


mi 11 i seconds) 
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向地图增加络径 

完成达个应用 r 

坐下来 T 好好想想，只需要一点点 HTML 和 JavaScript, 
你就已经创建了一个 Web 应用， 它不仅 能确定你的位 
置，还能几 乎实时 地跟踪和显示位置。哇呜！真是士 
别三日，当刮自相看， HTML (当然还有你的水平） 
真是不可同日而语了 I 

不过，说到这个应用，你难道不认为述需要再“抛光" 
一下才能算完成吗？例如，你移动时，可以在地图上 
显示你的位置，另外还可以更进一步显示你原来曾在 
哪里，这样就能在地图上创建一个路径。 

下面编写一个函数，在你移动时，保持地图以你的位 
置居中，每次到达一个新位置时放罝一个新 标记： 


裁们把这个焱截^激 









a 个宝杉！你的虽新佬 1 . 龙将祕® 4 这 


function scrollHapToPoaition (coords)( 
var la'tl'tude = coords. latrit.uda; 
var longitude = coords«longitude; 

var latlong - new google, map s . LatLng C 1 at i tude t longitude )； 


芒光歲得射的姅度和轻度，鈞它们釗 
違一个0£?£)01«>^产 L _ fttUv 0 的象。 


map. panTofl at long 》 ； 


被®的 pAiZi 方法奴迖个 LntL 4^0 的象4滚姑 
祕田，僅伢的新佬2佰子喊©中必 n 


addHarIcer{m^Lp f latlong r lf Your new location'% "You moved to: 


latitude + ’％ 1T + lon^i'bude); 

^ 噩后，僅用前甬写的數筠这个 fSSff 加一个杉记」 怿入祕 
新杉 tB 的一个杉拯和 一 #内銮 。 
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篥成我们鈴新&齩 

现在，我们只需要更新函数 t 毎次位黄 
改变时 H : 它 WfflscrollMapToPositicn 。 要记往，第一次脉 
用 dispiayLocatfon 时，■要调用 showMap 来创建地图 ，揉 
为你的"初始位罝 IT 示一个标记。在此之后，每次只需要调用 
scrotlMapTo Posit ion ■增加一个新的标记 C 无需再调用 
showMa ^) t . ftlk 地图重新居中。下面给出督改后的 代码： 

function diaplayLocation (position) {- 

v*r 1 狂 ti = po 塞 it i on.ao £>rds. 1 attitude; 


i 

\ 

.% 


var longitude = posit ion, coords, longitude; 
var div = document,getBlementByld( n location"); 
di.v.i.nne£HTML = "You are at Latitude : T, + latitude 



+ " f Longitude: 11 + longit.ude; 

div. in tie r HTML +益 r, (with 11 + posit ion. coords, accuracy + " meters accuracy) ,T ; 
var 5 tm = computeDisiLance (posi.trion .coorda ^ ourCoords); 
var di^tanc^ = document ^g^"tElementById( M di stance 1 *); 


distance .innerHTML 


"You are 


if (map == null) { 

sbowMap (position, coords); 

y else { 

s c rol lMapXoPositioti {po flition. coords) 


km + " km from the Wickedly Smart HQ T, ; 

第一次戊身 MUpLciyu ? ⑽ tb 内的，電 J 垂出他 ® , 拉坩加 M — 
个杉记。 

在 P. 禽潼 6 砹奄的嘁密亡泷加一个 
糸杉记 。 


爯一次 


_ oo 

重新加载你的页面，开始移动…"+你的地图会跟着 
你变化吗？你应该能看到，随着你的移动，地图上 
会增加一个标记轨迹（除非你一直坐在桌+ 前面不 
动） 

现在可以提交这个应用了，它将作为“无处可逃” 
的可犇 证据。 




(i 4 jU,vw^Ly 
StVtflKt 运郝 f ) 鉍密 
議瘃碡的最新珞 淦, 
:3硌摄供？杉记軏 
逢……嶁, m 
们不说的…… 


在 d 测试 : ktt|>;//wi^teArily：Si maa rL c^nvL/hfVitm.iS/kw 部 fl sVW.y Loc r ktutl 


r I 

LJ 
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优化标记使用 



代碚磁贴 __ 

结束这一齑之前，我们认为你可能希望这个应用更出彩些 s 
你可能 S 经注意到（有些情况下 ） ，监视位置时地图上是不 
是增加了太多的标记？ 

怎么回亊？ watchPosition 在频繁地检测移动 + 所以每过几步 
就会调用 displayLociatjon 成功处理程序 a 修正这个问题的一 
种办法是增加一些代码，这样我们必须移动某个比较大的距 
离，比如说用20米来测试，只有移动超过20米时才会 创建一 
个新标记。 

我们已经有了一个函数来计算两个坐标之间的距离 
(compute Distance ) 5 所以要做的就是每次调用 
displayLocation 时把我们的位置保存下来 t 查看前一个位 
置和这个新位再之间的距离是否大于20米，然后再调用 
scrollMapToPosition . 下面的一些代码会做这个工作，你的 
任务是完成这个代码。要当心，有些磁贴可能要用好几次！ 



var _; 

function displayLocatian (position) { 

var latitude = p o sition * c o o rds, lat itude; 
var longitude = position. coords, longitude; 
var div dodunent.getElementByldC’loeaticm”）,. 

div.innerHTML = 11 You are at Latitude: ,T + latitude 4- T, , Longitude : ■■ + longitude; 
div,innorBTML += 11 《with n + posi.t:ion.coords,accuracy + " meters accuracy) T, ; 
var km = computeDistance{poai'tion.coords r o n ur€oords); 
var distances = document.getE 1 ementByld ( IT di.siiance 11 ); 

distance, inner HTML - "You are 11 + km + M km from the Wicke d ly Sma r t HQ ,T ; 
if fmap == null) { 

showMap (posit ion.coords}; 

prevCoords ■* _; 

} else { 

var meters ^ _(po s it ion. co o r da , prevCoords) * 1000 ； 


if ( > 
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实现 3位置感知 


BULLET POIHTS -- 

_地理定位并不“正式”算是 HTML 5 规 
范的一部分，不过可以认为它属于 
HTML 5 规范“家族 " & 

-有很多方法来确定你的位置，这取 
决于你的设备。 

_与蜂窝基站三角定位或网络 IP 相 
比， GPS 是获得位置的一种更为精确 
的方法 D 

■ 没有 GPS 的移动设备可以使用蜂窝基 
站三角定位来确定位置。 

■ 地理定位 API 有3个方法和一些属性。 

■ 地理定位 API 中的主要方法 
SgetCurrentPosition , 这是 
navigator . geolocation 对象的一个方 

法。 

_ 9的0训0*^卩05出00有一个必要参数， 

即成功处理程序，还有两个可选的 
参数，分别是错误处理程序和选项。 

■ posit ioi ! 对象传递到成功处理程序， 
其中包含位置的信息，包括纬度和 
经度& 

■ position 对象包含一个 comds 厲性， 
这是一个 coordinates ^^。 

■ coordinates 对象的属性包括纬度 

( latitude ) ,经度 ( longitude ) fP 
精度 ( accuracy ) 0 

_ 有些设备可能还支持其他 coordinates 
属性：高度 （. altitude ) v 高度 
楕度 ( altitudeAccuracy ) ,朝向 
( heading ) 和速度 （ speed ) 。 

■ 使用 accuracy 属性来确定位置的精确 
度（单位为米）。 


■ 调用 getCurrentPosition 时，浏览器必 
须验证你允许共享你的位置 & 

_ watchPosition 是 geobcation 对象的_ 
个方法，会监视你的位置，并在位 
置改变时调用一个成功处理程序。 

_ 类似于 getCu ire nt Posit ion, watch- 
Position 有一个必要参数，即成功处 
理 程序， 还有两个可选的参数，分 
别是错误处理程序和选项。 

_ 使用 dearWatch 停止监视位置 D 

■ 使用 watchPosition 时，设备需要更多 
能量，所以可能会酯短你的电池寿 


_ getCurrentPositionfPwatch Posit ion 
的第三个参数 options 对象有一些属 
性，可以设置这些属性来控制地理 
定位 API 的行为 u 

_ maximumAge 属性确定 
getCu rrentPosition 是否使用一个缓存 
位置，如果是，它指定了请求一个 
全新位置之前这个位置的最大年龄。 

■ tin ^ out 属性确定调用错误处理程序 
之前 getCurrentPosltior > 可以有多长时 
间来得到一个全新的位置。， 

■ enableHlghAccuracy 属性向设备提供 
一个提示，如果可以得到一个高精 
度的位置，需要更多能量。 

■ 可以使用地理定位 APi 并结合 Google 
Maps API 在地图上显示你的位買。 
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练习答案 



H 丁加15镇字游珙 

这一章对第一个 JavaScript API 已经介绍得够 
多了 a 通过这个填字游戏把这些内容牢牢记住。 


令、 













飆承 ♦ 



横向 纵向 


4 , 经度从英国__开始测童。 

7.精度会对你的应用产生影响，因为它会影 
响_寿命。 

5 . 如果浏览器请求你共享你的位罝时你拒绝了，就会 

调用你的错误处理程序而且 码为1, 

9. “无处可逃”在电影____中 

曾提至 ij 。 

10+如果你的坐标__ 不好， 就不要向 

别人提供行驶方向 Q 

11. ___总部的秘密位置是 47.62485, 


V 使用 _方法将地图重新居中。 

2+没有 GPS 的老式设备使用蜂窝基站 

来确定你的 位置。 

3. _的纬度和经度是 40.77, ”73.98。 

5. 如果你把^_设置为0,就不会得到一 

+ 胃 

6. 可以使用 _公式来找到两个坐标 

之间的 距离。 


-122.52099 o 
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代袼磁贴 

你的任务是完成下面的代码，所以只有在增加上一个标记之后又走 
了超过20米时，我们才会显示一个新的标记 0 使用冰箱上的磁贴完 
成这个代码。当心，有些磁贴可能要用好几次！下面给出我们的答 

案。 


实现 位置感知 


任 1 E 承 • 


var 


£ 


prevCoords 


null 




function displayLocation (position} 


var latitude — position.coorda.latitude; 
var longitude = position. coords * longitude ； 
var div = document. getE 1 ement&^Id (' r 1 ocation"]; 

div.innerHTML - 11 You are at Latitude ： n + latitude + ", Longitude ： T, + longitude; 
div.innerITTHL += M (with + position.coords.accuracy + M meters accuracy) ■"/ 
var km = comput^Di stance (position. coords ^ ourCoords); 
var distance = document.getElementByid( t, distance 1 '); 

dist-^nce. innerHTML = ” You are " + km + ” km from the Hi c kedlySmart, HQ f, ; 
if {map null) { 

showMap {position, coords); 
prevCoords = I position ■ cooxdLs 



else { 



在钱濟 I 试： http : //wUfee 九 ys rt 仰 m/hfVi t V^ls/th 从 UWjj Loc. ht 从 L 
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练习？ 



^Jharpen your pencil 

Solution 



下面给出 displayLocation 的一个候选实现。你能猜出它做什么吗？仔细看一 
看，在下面写出你的答案。如果你爱冒险，还可以动手试一试！这是我们 
的答案 a 


d±^^mrrerrrnTi = "Y c rn a 丄 芒 : L + fcm + - 11 - km from the-Wiclcedlyamar t HQ n , 
if {km < 0,1) { 

di^tance.innerHTML = 1,1 You T re on £iref ,T ; 

> else { 

if {prevKm < km) { 

distance. Inner HTML = "You’re getting hotter! H ; 

} else { 

distance.inn^rHTML = "You're getting colder'■ ■■■■"; 

} 

} 

pr^vKm = km; 

4 达 f 英 迮这个 
代蜈敗 饩 


ii 个代 i$ 把我 iO 的忌 用 t 成 一 个冷 /M 游 ? L ^M^^wUkeciitjS^artM 
郭 I 适达金$孑 - 0ettL^ hotor ? ( 更热 : 5) 铴 fe, 或老釦果仿越来起 
m S 会 S 泰 H 0Ctt^ wLdcr r ( 1 冷 5 ) 。 如乘存 S 郝的 ai 呼米想 
1 肉， 消兔 tt 成 y 似 ' rc 0^ fen ( 你婁者丈 : n , 


Hi 我们得的的结果! 
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Sd 1 ?^ rwSi*'JC 


當试个应用 ^ 






















实现响 A ; 位置腺知 





黍 





螓鲁靠 

下面可以看到地理定位4卩1的_些选项。对于每个选 
项，请与它的行为连连看。 


争 


{maximumAjge : 600000} 


{timeout : 1000 r maxiitiujxiAge : 600000 } 



{timeout :0 


: Infinity) 


{timeout : Infinity t maximumAge : 0} 


我只想要年龄小干丨 0 分钟的缓存位 
置。如果没有小于10分钟的缓存位 
置，我会请求一个新位罝，不过前 
提是在1秒之内就能得到。 


如采浏览器有一个年龄小干10分钟 
的缓存位罝，我会使用这个位置， 
否_,我想要一个+新的位置6 



我只想要全新的位置。浏览器随便 
用多长时间，只要能给我一个新位 
罝就行， 


我只想要缓存的位置。不论年龄多 
大。 如果根本没有缓存的位罝，我 
会调用错误处理程序。 不耍 给我新 
位罝！我会离线使用。 
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缠习答香 




HTM 厶5镇字游珙考溧 


^ m jk - ^ m 

«rn 令本嘴 

一 A 

•_ 承參 
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6 乌 Web 交 ® 

+ 




4m. 




喜欢社交的应用 





你留在页面里太久了 a 泫出去走走，与 Web 服务聊聊，收集些数 
据带回来，这样就能构建更好的应用，把所有这些数据融合起来, 
这是编写现代 HTML 5 应用很重要的一部分，不过，要做到这样, 
你必须知道如何与 Web 服务交流。这一章我们就来讨论这个内容， 
在你的苽面中结合一个实际 w e b 服务的数据 D r 解如何做到之后， 
你就能走出去，与你想要的任何 Weh 服务交往了。我们甚至会告诉 
你同 Web 服务交流时要用的敁流行的 w 行话 " 。所以，跟我来，你 
会用到更多的 API ; 通愔 APU 


这是新的一章 






万能糖果公司应用 

万能糖果公司鬵荽一个 

Web 应用 

仟务来了：万能糖果公司（一家构建和部署糖 
果机的新兴 公司） 与我们联系寻求帮助。可能 
你还不太了解他们，情况是这 样的： 他们殽近实 
现了糖果机的网络支持，可以近实日地跟踪销 
售情况 a 

不用怀疑，万能糖果公司的工程师都是糖果机专 
家，但不是软件开发人员，所以他们希望我们 
帮忙构建一个应用，能帮助他们监视糖果的销 
售& 

这是他们发来的信函： 


饬可艏 还记绣 他们，在我 
们的 栈 
式》一 丰中曾 经法现 
栽们卒助诂们设03,壤务 
赛揉代砝, 




有3赡累机 t 
it 鬼谏洚力 


酬… ㈣ 糾娜 ㈣ 3 XS 綱刪& “綱 
< 札 於 ■切 喊 ㈣ 」 


-呰规?6&给仿 ■. 




劫和# ⑽細彝气你 ？ H 

务从—个 ㈣ 服灸器格 


1— ^ 

嶔 n 的 wtb . 味务器 


辦耷榜篥机部命 中心採 
备器报*。 
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㈣ m ， 光在点的闵想一想，如何设錡应用从一个 web 屎务.获骹 教戏. 轉后棵尨运 

r 些蛊4保辩 wtlof ® 不新 f 新。饬5?秸违； f ■知( I 如何蔌妝廒匆，不用拒现右 jRtJ 牵 

S $ S < IH . 函个®,漱##记， 4巧桡隹 M 的代鍈骂出靶代茲> , t SldMii 洛載一个热势 
让饬的 大脑科 劫起乘 • .…. 


舞咎齟承參 
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万能糠果公司概述 

万能耱梁公司的更多背景介绍 I ；：； 

除了万能糖果公司的简短说明，你可能对这家公司的背景了解很少。我们了解的情况是： 

首先，他们让分布在全国各地的糖果机向一个万能糖果服务器发送销售报告，这个服务器 
会综合所有这些掁告，并通过一个 Web 服务对外发布^另外，他们请我们构建-个 Web 应 
用，能够通过浏览器为糖果销售团队显示销售情况。他们可能非常希望当销售情况随时间 
改变时这个报告能够相应地更新。下面给出这个设计的高层视图： 






谢谢大荦 t 我掌 Sf 所省链售信 
念_把它们综含在一起。 


❶ 


万陡餹果公司鈐嫌果机部籩在金®咅 
M . 6们尚中心 ftumball 服务路尨送 
铺售仿患。蘭务器把达#馆患 汜供 
起来，邋过一令 Web 服务对舛茗布 a 





0 


1 


r-"i 



Gumb 别服务器 
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与 A et 交流 


© 浏览器加裁方能螗累公苺 
的 Web 应阁，包抟 BTh / U 标 
纪、 OSS 和 JavaScript c 




令往鄱承參 



© 应用龙出 一^ V / eb 锖求 I ^^umball 
鲅务器获取汇集的铺售信悤 《 


❺ roaitsi^sis"^ 


o 鐵編__⑽亂 



O 应用运©笫3步，涟锒 
请#新数揭 a 栉®摊， 
哀承靡上去在近实衬地 

更新。 



T - . WWW 

l^^ s Jk^ m JL "5~* ‘ ， B-^l 


i_lih£^a*M P^aw 



洌铉潑棵揭叩 M £ 新页由, 
用户会廣刻相应钵柒， 
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准备标记 

速后动 . 

既然耍等着万能糖果公司提供规范，利用这个间隙我们来做点 HTML 工作。 

你可能有个想法，觉得我们不需要大董 HTML 标记来从头开始构建一个 Web 应用 t 你 
的想法很正确。我们只需要一个合适的地方，销售报告到來时可以把它们放在这黾， 
其余的本情都由 JavaScript 来做。键入下面的代码，然后我们再来分析如何通过 Web 
获取信息。 




龟 i 






♦僉 m 承命 


(I 就 4 核逋的 HTMLa^ 

<! doc type html> 都和体 ， 

<html lang^en*，〆 
< head > 


<title>Mighty Gumball (jSON)</title> 

<meta chars et^ ,f ut f ^ 8 H > 链孩 H — 个亡 4 E 蚵 k/ 可以知遷 i 

<sg aript src=’’mightygumbal X/s cript> 很伊我 fH 就翁媒妄 vast-np-t J ! 

<link rel^^styleaheet'^ hr©f="might 父 grnnball ,css"> 


</head> 

<body> 

<hl>Might^ Gumball Saleg</hl> 
<div id= IT sales lf > 




衫 ㈣ 衫 ㈣㈣ 苦接 
式， iic ^ o 糙4到一个遘亮的狼苦 


</div> 

</body> 

</html> 


角来放籌镝逄 敌減' 基 
个镝送數掮 5 笱一个义也 ^^ 增加到 @ 塞。 


龙动引擘•-…* ^=m 

输人上而的代码，把它加载到你喜欢的浏览器，学习后 
面的内容之前先试一试这个代码。记住，可以从 http :〃 
wickedlysmart . com / hfhtml 5 T^CSS (牙 fl 本章的其他代 
码）。 
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紐何向 Web 服务傲 出请求 ? 

~ ■■ ■ — •■ - v -• - ■ ,■ — ■ - — ■ _ ■ ■■■ ■■ " • • I- _ ■■■ 

下面"先稍稍 退」 步 7 ■…你 已经知道浏览器如向向 WeS 断务器貪求诨 两一^ 
它向服务器做 出一个 HTTP 请求,服务器会返回页商，井随之返回 另外一 
些(通 常） 只 f 浏览器能看到的元数据,. 你可能 本知填/浏览赛还可以采: 
甩同样的考式通过 HTTP 从 Web 服务器获 襄取据 I 做法如 下:. 


列览薄 的掮 


\ I ~ I I 





' . . . 与 We f ? 交鄉 

入： :細 

- ■ ■■, 

■ _ ■ ■ i ^ ，■ ■ ■■■ — 。国 ■ _ 

■ ■ ■ " ' ■■ ■■ • •■■■■■■ ■■■•、■:-. _ ' " 

⑽輪峨 


# 


Web 服务器 




:: , ： ^ .： - 

: . .」吸 务器这 ® 致滅 a . 


再仔细看一看向服务器做出的 I 青求以皮 M 务誃返回的响应：这对我 | 很#帮助 。 
请求负责告诉岬绎 器:我 叼想睪什冬難辑 ▽ (有时称为我们想要的，资頫 n ) ,响应 
会 包含元数据，如果一切正岔，还会包含我们请求的 数据： ^ 





gwrttbfflLsflUs " (JK 务 HI :的应用 > 
的费谏。 


fi 用 .1 ttrrp 诂 mi 供孓一个畋 


如 d 啜务器运. 
來彥— 忉 iB 拿， 


无数猞： 时^^ 
wL&feed Lysi^wrt ； cpm 

敏由鴻 ¥. 


* ■…迗个该求來匀—个 

( sflfaia , cI ^ cm^c 和龙 他 f 產用 
&个 i^r-ag 糾 t 的琍愁 器） 。 


无轂猓：枵 内容. 
衣度备字 莘类喵 


…. 、■总 f 本教採杏达罜 


^TTJrVl.I 20 D OK 
Cont.^»Fit-J en^th .?5S 
..Cow t-typi^ppiJo^i on / j 3 on' 

rrfiameW^MPBSLL' - 

130i212&03{]S3 F - ：' 

’ sa ! ea. L r _H 

("ndni&'f ： ■'FPESHO", 

-CimM: I30m2gD31&0, 

" 3 ales n， ： Z), 






说於 V 运种 fi 用 获极數 M 的移.式 i § 常稃為 或 
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使用：;•彳卜 

如何从 JavaScript 傲出清求 

好了，我们知道叶以用 http 获取数据，那又怎么样呢？我们要编骂一点点代 
码来创建一个真正的 HTTP 请求，然后让浏览器代表我们发出这个请求。做出 
请求之后，浏览器再为我们传回它接收到的数据。下面逐步分析如何做出一 
个 HTTP 请求： 


A 首先从一个 URL 开始。 毕竟，我们要告诉浏览器到哪里找我们想要的数 甚斿 一# 交虔盘鵠 

据『 的格式，巵®注含#於这 


iA 圣 裁们的 W . R^ r 治子 



广 个内容 

I 


var url = ,T http : //someserver* com/data.j son ,r ; 

把这个 WRjL 放奋一个变 # w _ ri 中，柏后金 
用 l _) 这个 i I # 

Q 接下来创建一个请求 对象， 如下所示： 

var request = new XMLHttpReque st (); 

.个 1 

将 ( I 个鸬求对装斌至 用 XMLH + tpR ^ kKt 构逢矗蛊速一个新的 

一个変螬求的象„稍后含介绍萁中的 “ XML ” 部分。 



—个含 ^ 


A 下面需要告诉这个请求对象我们希望它获取哪个 LJRU 以及要使用哪种谪 
V 求（与上一页的请求类似，这里将使用标准的 HTTP GET 请求> u 为此，我 
们使用了请求对象的 open 方法 a H open B 方法听上去好像不仅会在请求 
对象中设置这些值，还会打开连接并获取数据。但实际上并非如此。尽管 
这个方法洛有 w 打开”的意思，但 open 只是用一个 URL 建立一 个请求，并 
告诉这个请求对象要使用哪种请求 T 以便 XMLHttpRequest 验证 连接。 可以 
如下调用 open 方法： 


request . open (’’ GET ”, url ); 




嵙设 E 这个鴒求璉用存絲 
fQuri 变 等中的 
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o 好了 t 到重点了，这也是 XMLHttpRequest 的关键：敢后要求 XMLHttpRequest 对象获取数 
据时.它会自己去获取数据。可能需要90毫秒（按计算时间来讲这只是一瞬间），或 
者如果速度很慢，可能要花10秒（这就是相当 长的一 段时间了）。所以，我们并不 
是一直傻傻地等待数据，而是会提供一个处理程序，数据到达时就会调用这个处 
理程序。如下建立处理程序 （你 应该很熟悉 了）： 


戧们的4求对象 & 

request, onload — function {) { 

if (request* status —= 200) 
alert {"Data received! 11 ); 


厂别埯 B 认达锃 web 腺务得 
f 1 ) — 个街爸的 ,它倉满 
^ 用这个函數 & 



处铥锃 垮芭先 菜曩检查这闳猛各否為_或 一 oW r 搀后可以的这个數掮 
f 故 H 吒公理现存戧们® 星苦佴 用户作：?教翔 。 后矻这含鉍写 
的代鹆来丰富 ( i 个功齡。 


request s adt^ - function 0 I 

if Ci^jeaL.aTitua — ?0D'| | 
3le-rt<"l^aCa received] H 'i : 


i 


li 


Q 还 有最后一步：需要 吿诉请求对象去获取 数据， 为此 要使用 wnd 方法： 

^这含尨讀求发 屎务赛 a 扣篥 不打 JT 命遠锃屎务裘 送甸闲 盘掮，就 Mf 毛入 

request. send (null); 弒沒有缓送數掮）。 



成功的 20 L 最好现在捵 撖我 
的处瑾我序，把这今&槔交绐 

■ ■■邐 A « ■■ 


总结一下，我们要创建一个 XMLHttpRequest 对象，基于一个 URL 和 HTTP 请求类型加载 
这个对象，同时提供一个处理程序。然后发出请求，等待数据到达，数据到达时，就 
会调用这个处理程序。 


rwjusst.onlcmd ^ function (] | 

if (request.status = 2i>D| | 
alart ("Data received ! fl ]； 

} 

K 


UjJ 
Web 服务 


你现在的位遨 > 
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如何 访: 问 





絕省一 &我 本夂满楚;我们 
用锊到数痗节？我着对 Tonfoad 奋数，不 

a _ 尨奪布 ft 婢 ㈣1!_ ft 5ft X{f 

么码？ — 


我们还没有谈到这个问题呢^ HTTP GET 获取的数 
据可以 在 reques 爸对象的 •responseTextJK 性中找 
雜所以可以编写类下面的 代码： 

/ - - 4.求戏讫則一个响应 

k / 时，含戊用 i 个备数。 

request.onload ~ function(} { 

if (request + 3 t 在 tus_ — 200 J C 


alert (request, responseText ); 

^ ^ ^ request 3|J ^ ^ inespo^scT^t 

廣 fl 戌到砀 应， 


不过先等等，就要到关键 : T 1、面将使用 request . 
responrseText 编写一些真正的代码。 
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代碚磁贴 


、參 交 0^ 

挪 


羚 ftp ；// w 〖 df «% smarr . a > m / ifceWucfcyroc ^ y 提供了一个新的 Web 服务，点击时可能返回 " unlucky " 也可能 
返回 lucky ” 。具体的逻辑基子_个古老的秘密算法，这里我们不便批露，不过 t 这是一个很不铕 
的服务，可以让搿户知道某一天他们是否幸运 & : p ^ 

我们需要你的帮助来创速一个参考实现，向别人展示如何把这个服务包含到他们的网站中#下面给出 
了骨架代码，请帮我们用磁贴填入具体代码^要当心,并不是所有磁贴都会用到我们已经帮你完成 
了一个空。 

window, onload - function () { 

var url = "http: //wicic® dly smart, com/if eel lucky today M ; 
var request . =_ 


digplayLuckf 


把雄鲇放右这 1! 


function di splayLu^k (luck) { 


var p 


document. 


riucfc ”）； 


1 Today you are rt + luck ； 


Te 3 ttHttpKe<?^ eS ; 


raqwest.create("GET", url); 


new 


var ± = 0; 


request - send (null ); 


request.open ("GET'urlJ 


request .onload = function (V 


myLuckyTejc 


200 


requests status 


你现在的泣置 ► 
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练习答案 



代碚磁辩者寒 - --- 命> ‘ 

/ jfrp // w / d ^/ ysnwLavn // fee // udcytc ^ y 提供了一个新的 Web 服务，点击时可能返回 " unlucky " 也可能 
返回 H lucky " ,具体的逻辑基于一个古老的秘密算法，这里我们不便批露，不过 T 这是一个很不错 
的服务，可以让用户知道某一天他们是否幸运。 

我们需要你的帮助来创建一个参考实现 t 向别人展示如何把这个服务包含到他们的网站中^下面给 
出了#架代码，请帮我们用磁貼填入具体代码，要当心，并不是所有磁貼都会用到 e 以下是我们的普 
案： 



window, onload = function () { 


var url = ,T http://wickedlyamart.com/ifeelluckytoday' 


var 


request =[ new XMLHttpHaquest Q ; 


recfuest. status 


t= 200 


displayLuch(1 requestsponaeText 


}； 





function di spl ayLuok {luc k) 


var p = documen't. 




Today you are 
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本周访谈： 

HTTP 请求对象的告白 


^与交流 

NM 厶 Hf f pR 叫 ueH 內丧隹场 



Head nrst: 欢迎你， XMLHttpRequest, 很高兴你能抽出百忙应邀到访。能不能跟我们说说，你在构建 Web 应 
用中起什么作用。 

XMLHttpRequest： 是我开启了这个新浪潮，把外部的数据结合到 Web 页面中。听说过 Google Maps 吗？ GMail 
呢?那都是我的功劳。实际上，如果没有我，那些根本不可能。 

Head First: 怎么这么说？ 

XMLHttpRequest: 在我来之前，人们都在服务器端构建 Web 页而，创建时所有一切都要“烘制”到页面屮。 
有了我，你完全可以出去走走，等页面构建好了再来获取数据。想想 Google Maps 吧： 每次你调整地图上的位 
菁.时，它就会更新页而显示，裉本不用重新加载整个页面 & 

Head First: 这么说,你很成功喽!你的秘诀是什么? 

XMLHttpRaqyest: 低调低调，嗯，很简单 5 给我一个 URJU 我就会为你获取数据^除了这个，我没有别的要 
求了。 

Head First; 就这么简单？ 

XMLHttpRequest: 嗯，你确实得告诉我，等我拿到数据之后要怎么处理，你可以给我一个处理函数，算是一 
种问调吧。我拿到数据时，就会把数据交给你的处理程序，按你希諶的方式处理数据。 

Head First: 你说的是什么类型的数据？ 

XMLHttpRequest: 如今， Web 充满了各种各样的数据：天气数据，地图，人们的社交数据、附近的地理定位 
数据……离的，你能想到的任何数据集都可以采用一种适合我的方式溶入 Web。 

Head Rrst 这都是 XML 数据，对吧？我的意思是，你的名字最前面有 “XML” D 

XMLHttpRequest: 是这样吗？你是专业人士，这就是你做这个访谈的目的吧？你肯定提前做了功课，你想说 
的是“你就只知道 XML， 是吧？ " 让我来纠正一下。没错，有一段时间我主要获取 XML, 不过这个世界 R 新 
月异。如今，我可以获取各种各样的数据。当然，有些是 XML , 但更多的是 JSON 清求。 

Head First: 是吗？什么是 JSON, 为什么它这么流行？ 

XMLH tip Request: JSON 是 JavaScript 对象记法 (JavaScript Object Notation), 它有很多好处，规模、可读性 
等， 另外还有一点：它是 Web 上玷流行的编程语言（当然，就是我的朋友 JavaScript) 的内罝记法。 

Head First: +过，不是说格式对你来说没有影响吗？用户应该能清求 XML 或 JSON, 或者甚至是电传通信请 
求，这些对你来说都无所谓，难道不是吗？ 

XMLHttpRequest: <不作声；> 

Head First: 嗯，看来戳到痛处了 5 没关系，正好我们也该告一段落了……那么, XMLHttpRequest , 我想这 
一章后面我们再找个时间聊聊？ 

XMLHttpRequest: 行吧，遗憾的是，我要看看我的日程安排…… 
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介绍 


XMLil ： 位， JSON 登场 

你可能记得（也可能不记得），曾几何时，我们都把 XML 当作救星，这是一 
种人类可读、机器可解析的数据格式，也是原本要支持世界上所有数据需求 
的数据格式。刚开始开发 XML 确实是大家交换数据采 
用的方法 （ XMLHttpRequest 也正是因此而得名）， 


不过，在后来的道路上，显然 XML 睬到了 JSON 扔出的香蕉皮 D JSON 是什 
么？这是最新最棒的数据格式，脱胎于 JavaSciipU 已经在整个 Web 得到采 
用，包括浏览器和服务器端 & 多说一句，它会不会很快成为 HTML 5 应用选 
择的格式？ 

那么， JSON 有什么过人之处呢？是这样的，它的可读性相当好，而且可以 
很快、很容易地解析为 JavaScdpttt 和对象。与 XML 不间1它非常可爱…… 

说了这么多，你对它 是不是 有点点喜欢了？这本书里会大量看到 JSON 。 我 
们用它在网络交换 JavaScript 数据，用 Web 存储 API 将数据存储到一个本地 
存储库，它迅是另一种访问 Web 数据的方法的重要部分 （稍 后再做更多讨 
论）。 

不行，先等等，网络数据交换格式……存储格式……这很复杂吧，是吗？ 

不用姐心， 接下束10豇我们就会让你成为 t 专家， 实际上关干 JSON 需要 
了解的一切你都已经知道了。要想使用 JSON , 你只需要了解 JavaScript 对象 
(你肯定巳经非常 r 解 H 和两个简单的方法调用。它的工作是这样的： 

A 我们有一个想交猱成#铽的 JavaScript ^ © 銥采躉表杀这个对象的—个孛符 

皋， m 以谁用 JS 0 rUtr 〖 ng ( fy 方法，抚这 宰。可冰保存达令 $• 把它传绐 

令对象作为实参传入。 一令&敢，边者通过 A 路龙送軍。 





个副本。 薰31龙它传袷 JSON . parsfi 方法 fl 
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使用 JSON 的一个小例孑 

(?) 下面运行一个简短的小例子，将一个对象转换为它的 JSON 串格式 a 可 
以从你已经了解的一个对象 开始： 第4章中的 Movie 对象。井不是所有 
—切都能转换为一个 JSON 串。例如，方法就不能转换为 JSON 串一不过 
所有基本类型，比如数字1字符串和数组都可以转换。下面创违一个对 
象，然后把它转换为一 个串： 




与交流 



这 f 确食 这句另 4—咎闱 


var planSMovie ^ new Movie(^Plan 9 from Outer Space"/'Cult Classic", 2 f 

[ ， _3:00pm，_, T ， 7:OOpm ，T # M ll:00pm"]) r - 

Ci 4 —个龙整的 wvic 的象 t 忽 ' — ^ 

数穹和一个數诏 v 



一旦得到对象，可以用 JSON.stringify 方法把它转换为】 SON 串格 
式。 下面来看这是如何做到的(你可以试试看，打开第4章的 movie 代 
码，把下面的代码增加到脚本的最 后）： 



J^¥HiCF|p« 





var jso^String = JSQN. atrinqify|plan9MQviei : 
alert ： (j sonStrxng); 



这袅饵 约的铭蓽，■中 
含$牙的象的魬本 * 




我们得到了一个表示 Movie 对象的 JSON 串。现在可以对这个字符串 
做任何处理，比如通过 HTTP 把它发送到一个服务器。另外还可以从 
另一个服务器接收一个假设一个服务器为我们提供了这样 
一个申 t 怎么把它转换回 '个对象来进行处理呢？只需要使用 JSON, 
stringify 的姊妹 方法： iSON.parse D 如下 所示： 



var jaonMovieObject = JSON sparse (j sonStringi; 现焱龙达行巧一个负正的 

alert( T, JSON Movie is M + jsonMovieObject.titled; 兔： # 闲达的屬忖 D 


「像你 … 




试试这个 URU 你看到了什么？ 

http:// search, twitter , com /s e ar ch. j son?q=hf h tml 5 

ii ■札 f'lrcfox^M t 伪打 幵咸译 存一个立 g W 角 

或 4 f 4 吒蓁本的纥本铋踢器打 # 





















查看 规范 


祕 ㈣ _ 







^0 




节 5 轉翠 
%^ t 诔法力 


C ^ umbaU 服务器规括 

0 常惑锕汸錄挑起 4 拒！ 

戧们 s 绍把轉采机发來的錡节後皂作总亿蕙，拉由我们的中 w 
m 务基 盔冻： 


爽似 下而 a 楫: 


http : //gumtoall* wickedlysmart - com/ 

钱们洼择? SON 忾衿 數揭格式，釦票伢魚击 I ； ® 的 URL , 舍渾 f ’) 一个朽 ON 的象數租， 

成衫 “ __ 雜扣 _ 
' 尽 亞州的 

^- 裉苦 f) 来的的间 （輩 话衿 I 


" >1 naiae n 2 ” CAMPBELL % 
"time ”： 1302212903099, 
"sales ”： 3 } t 


name n ^ 1T FRESNO" f 
-time": 1302212903100 
T sales PT ： 21, 


1—: 史狼咅二后这出的栲集教 
^第二个嘁韦.秤栗斯 


这 Its 芍 ft 有 S 多嘁布 ■* … • 

• fi 你的刺 %赛中鍵入达 个 u 奉寿 ii 闭的 * 你食看 fO — 个數组，其 
中节一个滅 f 个 ii 样的 时象。 

这苟 W 奋 URL 的末 4 ff 加一个加 pcnteittie 誊數， 这样 P , 含得妁这个时（鞏 G 巧雀#> 0 
问之后的艰告。 芍以嚷下葙这 榑谩用1 / 

http^/guinball .wiclcedlysmart ， com/?lastr«portti«>e =130221 2903099 

现 4 效们轉到: T 數石 个梼蓽机报告 ,农籽上平钧九约茧 5 — 8 #郝含萆 H 艰条。 

也就袅说， iii 栽们的 t 户艰务器 f 辦以硪先在本蟪测试伢的代砝_， 

苒次感谢你的帮助！系外 J 记 d 舦簿钱们的叹“有了麴果初^永达充 
满洁 力"。 


，方锥栲果公司工程柙 
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令、 


与 We ; 交流 


孖飽工作嘈 


我们已经拿到万能糖果公司的规范，另外也完成了 XMLHttp- 
Request 和 JSON 的培 UlL 你应该已经准备好了，下面来编玛一 
些代码，让你的第一个糖果应用运行起来。 ^ 

要记住，我们已经完成了一些 HTML, 可以作为起点，它链接 
到一个名为 mightygumball.js 的 文件。 我们就从这个文件开 
始编写代码。另外还要记住，我们在 HTML 中留 r 一个位罝来 
放晋糖 果销售数据，就放在 id 为 "sale^ 的<d iv >* D 下面把 
这些内容集成起来，编写一些代码> 


谅驾一 个 onload 处理蚤数 

相信这对你来说已经再熟悉不过 f , 我们要编写一个 onload 处 
理程序， HTML 完全加载时就会调用这个处埋程序^我们还要 
发出一个 HTTP 清求来得到销售数据 D 数据返回时，我们会要求 
XMLHttpRequest 调用函数 updateSales (梢后就来编写这个函 数）： 


window.onload = function Q { 

var orl = "http : //localhost/sales.j aon^ 
var request = new XMLHttpRequest Q ; 
reques't. open( ^GET 1 % url); 
request.onload - function() { 

if (request. status == 200) { 



令先詗 M — 个冬地允件(逢蚝万 
论这个由窖 . 


这 1 釗建 5 的象 T 筝吁我们的 
方 4 ,熬后屬 ft 设 E 片 一 个圣盘，逑 5 
XM LHttfiRCC [ W.tSfc c 

松查45 —切正常，然后…… 


updateSales<request. responseText) ; 



}； 


request, send (null) f - 






數竭完成加載的,含戌用 H 个 



如果你在使用 Opera, IE &或更早版本，建议你用其他浏览器进行 
测试。后面会讨论如何支持 Opera 和更老版本的 IE 浏览器^ 



你现在的位 M ， 
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如何 测试 

显示糠果销 售数据 

现在要编写处理程序 updateSales , 先让问题容易 <些，来看最 
简单的实现，以后岈以 It 它变得更好： 




function updateSales (reaponseText.) { 



较驳 HTTML 中的 




var salesDxv = do cument. ge tE leme ntByl d { ,T sales) 


s ale s Div, inner HTML — responaeText. 





把这个 riLv 的内窖设籌片 f 个 
蛊城硝。稍后含 iJtfl 发钵褊 
科“，…光来做个谢该 》 


当心，前 ® 要绕行 f 參 


又该测试了、不过首先要稍稍绕点路，万能糖果公司工程师要求我 们访问 
他们的生产服务器之前先在本地测甙，这是个好主意。不过要完成本地测 
试，我们需耍把这些数据放在一个服务器上，这样 XMLmtpRequest 才能使用 



HTTP 协汶获取数据 D 
对于服务器，可以有儿个选择： 

■ 如果你的公司已经提供了一个可用来完成测试的服务器 T 
可以直接使用。 

■或者，如果可以使用一个第三方托管服务，如 
GoDaddy , Drcamhost 或另外某个托管公 H ]。 

■ 最后，可以在你自己的机器上建立一个服务器如果是这种 
情况，你的 URL 应该类 似于： 


http:// lo ca Ihos t/mighty gumbal 1, html 


艾件也■故在个子 0 录中， Iqttp :/ /locui kiost /0 Li / 
™. L 0 htygu ^ tlo ^ U . ktkw.l 


裔看下 一员的 提示和线索。要记件:，托管环境会稍有差别，我们没有办法提 
供一个面向所有托管环境的通用指南。所以，愿力 S 弓你同在 t 如果你不能 
钤松地访问一个已有的服务器，在你的本地机器上建立一个服务器可能是你 
的最佳选择！ 
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如何建立你 f 3的 Web 服务器 

如何建立你的本地托管，这很大程度上取决于你使用哪种操作系统 
査看以下对 OS X (也 称为 Mae ) s PC 和 Linux 的提示下一页还会看到 
另外一些选择 s 


与 交流 




我是一个 Mac 


在 Mac 上建立 Web 服务器很容易 a 进人 .> 
System Preferences ( 系统首选项 ） ，然后选择 
Sharing ( 共 享）。在左边的面板中，一定要 
选巾 Web Sharing (Web 共 享）： 


Web Sharing 


一 旦打开 Web Sharing (或者如果已经打 开）， 
你会看到一些倍息，告诉你如何访问你的本 
地服务器_应该能使用 localhost 而不是 IP 地址 
(如果你使用 DHCP 路由器， IP 地址可能会变， 
所以 localhost 更合适）。默认地，你的文件将 
ft http :// localhost/-YOUR __ USERNAME / 
提供，这会从你的 YOUR _ OSEHNAME / 
Sites / 文件夹提供，所以可以在那里为万能 
糖果公司逑立一个子文件夹 g 



我是_个时 



在 Windows 上安装你自己的 Web 服务器要比从前 
容易得多*这要妇功于 Microsoft Web Platform 
installer ( 也称为 Web PI) 0 Windows 7, Windows 
Vista SP2, Windows XP SP3+, Windows Server 
2003 SP2+, Windows Server 20GS 和 Windows Server 
2008 R2 上都提供了 Web PI 的当前 版本， 另外可以 
从这里下载； http ： //www^microsoft-com/web/ 
downloads/plat f o rm.aspx„ 

还有一个选择 t 可以安装随 Apache, 

提供的开源 WampServer ， 用来完成 Web 应用开发。 
这个服务器很容易安装和管理 9 

'^TiUM.http ： //w w w, wampse rve r, com/en/ _ 卜栽 
WampServer^ 

如果你留心还会卷到很多其他开源的解决方案，选 
择确实很多 6 


- 


我是全 ^ Liwux 窟布 

面对现实吧，你知道你要做什么 ， 对不对？ 一般都会默认安装 Apache , 所以可以查看你 
的发布文档 & 
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障 

SB chaoWfB* 

: Jj iitJLfXtr^ 
^ cnaot^S 
^ ci^Pte^ 

^ chigne^i 
_ 

wi ch^ca^tO 




釦集不想使用命 
ftp, JtsJMfl 
用一个 m ^ l 4 ( 如 
T>fl»^i.t ； aijbtrd^h 
^ iwl ^ sc ^) 来译 f _) 
<^t f 4 的 z 件, 


l SItJ 



id Ch 4 |K«^ 

二 w 


, £11 钃 EJ^ tf i 

cngimer^ 

以 EJiaiiM^l 

■」 chmentrS 

.^; i-P^^rS 

^ chapti?^ 

RiADMttal 

l 3 , glat * 1 



fouruyff .tli irtmaJ 

Sttfut 


建立你 自己的服务器 

如何建交你 t 3 的 Web 服务器（续） 

哈，你想真正托管你的页面？太棒了，让页面真正在 Web 上托管，这绝对是无可替代 
的 6 参考下面的提示，祝你开心！ 


第三方托管 . 

如果你不想建立你自己的服务器，完全可以使用一个远程服务器，不过需要 
托管你的 HTML 、 JavaScript 和 CSS, 还有 ISON 文件，所有这些都要放在同一 
个服务器上 （后面 会讨论为什么这一点至关重要），这样才能顺利完成这个 
例子。 

大多数托管服务允许你通过 FTP 访问一个文件夹，你可以把所有这些文件都 
放在这个文件夹里 ^ 如果你能访问这样一个服务器， 4 以上传所有文件，把 
下一页上的所有 locamosi 换成你的服务器名。 


也许你需要我们推荐托管服务，所以我们为你整理了一组托管提供商，不 
过托管服务商很容易找到，只需要捜索 “wet> 托 管 " ， 你就会找到大 S : 托管 
11 民务可供选择。我们的歹 ij 表放在 http://wickedlysmart.com/hfhtml5/ 
hosting/hosting. html ft 如果你上线了一个 HTML5 网站，请通知我们， 
我们会非常期待！ 


——^IKIBVI— 
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爯来看看代磁 

希望你已经建立 F 自己的服 务器— 时 iiLi 经顺利运 n 这可以是你的本机上运 
行的一+服务器~ t 我就是这样做的>，也可以是你能访 |U) 的其他位露上的 一 
个服务器 g 不论哪种情况 t 总之要把你的 HTML 和加 vaScript 文放在这个服务 
器士，然后将浏览器指向 S€TML 文件。 还需要 把万能糖梁公苛销包数据爾试文 
件也放在那里，以我 n 将提供一个简单的 数据— 文迚，4以把它 放庄你 的服务 
器上 e Xt 长你的应用来说，看起来数据 就像是 从万能楮果公司的近实时务器_ 
生成的，这样就允许你湖_代码而无需访问万能糖果公司的令产服务器。这个 
文件名为 saTesjsoiw 随本书代码提供（或者如果你喜欢打宇，也坏以自己 
输人），内容如 





[{ M name” ： M ARTE SIA"/'time >T ;1308T7424O669 广 sales” ： 8}, 

{■_nam ❷”； "LOS AMGELES M / T time ,r : 1308774240669,^sales' 1 :2) f 
f _name， r : ■_ PASABENA' 1 , T, time ,T :130877424O669 T °salea ， r :S}, 
rnani 赵 WTOCKTOIT,_ ， time.:1308774240669/Vsales r _: ； 2} f 
{ ,l nam© ,, : T, FRESNO n /'tlme ,, :130e774240669/ , sales t, :2h 
{ ,f name ,T : n SPRING VALLEY 1 '/'time '*： 1308774240669/ , salea f, ： 9}, 
( ,T name ， T :"Kl*VERTA , % ,T timeM308774240669,'bales' 1 :5>, 
( ,, name M ： ,t SACRAMENTO M , ,> time ,, M308774240669/ , sales 1f ： 7} f 
r,name fl : ,T SAN MATEO 11 ,"time":1308774240669/ r sale3 ,T ： IJ] 


赛闷真正的 1 戶照务器佴科实的 
yT ^ 诮*|數拽 t 前 < 裁 n 先茂 | y 级 Ld 


把这个文件放在你的服务器上，并确保将 JavaScript 更新为这个文件 
的 URL 。 我们的 URL 是： 

http://localhost/gumban/ 3 ales.j 3 on ： 先在，到 i • 器中濟 h ■式这个 

一 Li 兒 L r 域係 一切正常. 

window, onload — function Q { 

var url ^ ，， http://localhoat/gumball/sal«s.jsoii 1T ; 



! ■: 、、心 


1 13 咐 74 J2 C h j - 


vajr request = rxew XMLHttpRequest 0; 
requ«s.t. open f ,r GET M , url ); 
request, onload = funetion(J { 

if (r e-ques t,. s t a'tu s == 200) { 


V 择保龙.南 IE 痛的 ., 


}; 


updateSales (requestr, respond eText); 


request, send (null); 

} 
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蒯试万能糖果应用 H 



來测试系 

真是一条漫长的路，不过终于要测试这个代码了！ 

确保已经把 HTMU JavaScript, JSON , 还有别忘了 
你的 CSS 文件都放在服务器上。把 HTML 文件的 URL 
输人到浏览器（我们的 URL 是 http://iocalhost/ 
gumbal 1/mightygumball *html) ， 再按回车 
键…… 




Mighty Gumball Safes 


ll 


A 


■-V _： 

\ 4 pT 


H/W,T 






I ritnw* ARTmiA-^lhdcM »aT7«40M^ W. 私 f V 听 

ANGttLES ' Tknp'J 308774 HOMa ," 2} ' 

(m\fiEWA 3tB7?^340fi<W v^-gi 

i 二 ’ 二 〒^ 0 ’，*^， ■ ^ 77424 ^ ， *•*« 、 幻 .1W- 

V ALLtV' /iknt', 

i J^ H r^VBRTA-^|[K"ri,V)S77-t24W .Mia. ” 


A 

*drjr* 



1 

1 


■' 


i 疼不够美观 r .不过 4 定节教鵠 3 。 




tSfi , 戧们5发 ( M - 个 http 硪求乘得 f_)aUsjsor 
中的盎神，这些盘昶测利旋存 寿 hi — 
切袖利 f 



如果««闵通, 

器華独蚩《备个 i 件.确保姦个丈 
件邾弓 以送句。 铦后反 1检查你的 
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让窖户截撼— 

经过这么多艰苦努力，这个应用巳经能运转了，很不错，不过万能糖果 
公司还希望更上一层楼*如果能看上去漂亮些，他们会更为震撼。现在 
就来做这个工作…… 



与 Web 交流 



我们现在的应用 




I , ; - Qj : ITU ， “ 

Mighty Gumball Sales 

){'nunc : ， JUCIESIAVtiniE. ■- l3M77*M»W h F P»fcs r ： »> .{ ■nimi'TXlB 
ANGELES 1 rcb^M3«774M)fi69/«ltt" , :l)H 
{ r Tmw , ;TASADEMA\ T [i™* l3Q«TM»0M9,>yc« r :Sh 
{.mratVSTOCKTUN Vl]mc't JCBTMXJMrtf , 

「onnK ■: K PRESNO_ ，- tirtto' I XW’MMMS ， - *3PM (Nti 
VALUIY-.liiiae^l ■ 

('nime ; _ELVERTA' 、 rad3£WT7«««V**l«d>. 

( ■: MWlJOI77434t)6«.-«J« , :1} T f wm* *SAN 
WATEO'.-thw^l 3(*r?4H0^ .*naJe*M}} 


0 前 a 们只爰把 -* 數组 £M 放存到 

链甚中。尽 f 3 FB^i 

來 f . 矣 a 样一个很耔的敌揭绣 构居然 浼能 
更有蛀站利用! 


我们想要的应用 


« ^ n 

■■国 .. - 1 ■ •, . ■ 


.'l&oJteni 


111 '! i! 1 I —(〜■■—■ —ig 3 mJi.aafc. j'- i' I ■ „ *■ i ■ _ _ ■■、 ■ P- 

lu.^^irrnigiNyB^^n.N^- C KQ b ： ■ 


Mighty Gum bail Sales 

ARTE51A »ld 0 9umball£ 

LOS ANGELES sold 2 gumboils 
PASADEMA sold S gumbatls 
STOCiCTON _«J ； ffumbafl* 
FRESNp sold 2 g_tot| ¥ 

SPRING VALLEY sold 9 gtimb^IFs 
ELVEHTA Mid 5 qumbbM 
SACRAMENTO soldi ? gumlMl 祕 
SAN MATEO sokl 1 gupntMlIs 




iif 戧们克分 f ) 用; Dson 數诏，由它创違 
个澴夹的 i 矛，軚*这墨后的1巧分出: J 矸么 
444 Jr , ft 么4处余，伢觉饵成？ 


需要从这些方面改进显示 : 


① 酋先，*襄从 XMUHtpR 叫 ti « t 对*取诊数探（这是一个 JS 0 N 睾）， 
托它转珐为一个 SiEtS JavaScript 对象。 


@然后迪拓锊到的数纽，尚 POMfll 加新无 对瘅数 级中的 毎令锇 
售《揭增加一个 无素。 
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增加丄 m . 

调蝥代码认利阁 JSON 

下面就按照这两个步骤调整代码： 

① 哲先*襄从 XMLttpRequest 对枭取谚数梅（达是一个 4 S 0 N 串 ) 
AJL 的 JavaScript 对象 u 



为： f 做到这一点 • T 5 更新 updateSales&iS：, 莆先删除将 《 Jfv >_ © 设 ® 为 
responseText $ 的邾一行代码 4 使 JSON.parse 把 re $|) OmeTeXf 认字符$转換为 
相 S 的 JavaScript 对象。 


function { 

var salesDiv = document * getElementById ( (t sales ，T ); 
s ale g Div. i miaraTfCL ~ responseTerjrbr ^ 不爲棄屦遠朽代媒 1 

var = JSON.parQefresponseTQxt }； 

象 (^£li 


- i .%£ D n .pfl r^tit IS 样箱# 一 七;! 

, 迖枵 I — 个.數 组）， mt ^ t §^ us .. 


@ 观在遍®所得剡酌数組， feWJM 增加新无棄，对子数趄中的每个镝 H 数採，在 
垅加一个无棄。我们将为每个镝售数掩 釗建一 个新的 div >: 


function updateSualedresponseText：} { 

var 3alesDiv = do cume n t. ge tE 1 em«n tBy Id ( M s ale a 11 ); 
var sales = JSON.parse(i:espon3eText); 

for (var i = 0; i < s a length ； i++) 、这代 H 兹牮中的茗一场。 

var saJe ■ salftsfil; 知 .__. 

^ "■的 子數通 中的莕一场釗缠一个拉 

dlV ^ .creataElom^nt (Miv^); 相运类 (，^) ^ (您全 

div. setAttr ibut® ( r, classj,]) 


div.xzuidrETML = sale, name 
salefiDiv.appendChild(div ); 



+ sale , sales 


giimballe”, 


用 L ^ f + TMK 2: 磨 < dlv > 的内容 f 然沄 t (如 d 个无 
| h < dU /> 的今无景 D 
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与 Wet ) 交流 


最后冲剌 




你已经知道这个应用最后是什么样子，不过还需要继续做以下修 
改。再仔细看看上一页的代码，确保已经全部掌握 n 然后重新加载 
这个页面。 

卷嘧.我们:免过蟲后含 
个样孑 r 


瀏试一杻正紫，珉在你们玎沭用方能耱 
果公段的实标生产齦务 S 3 。 抚诤好 
运 f 


S Jrf 

赢翁 f 

袖 卿 G —, 

咖叫如 gg 灿 d;gumt 咖 
PASADEIM IBM a ㈣ 咖 
-^OCktdjsj j ffLLm , e>at H s 
f ftESffsO iQ^f 2 gumbfflM 

E! ■ 响 师 ㈣ a 

SAC^NTO M(d?gUTTi6£fHs 




检松 《。 


转尚实际服#軎 

万能糖果公司要求我们先完成本地测试，我们做到了 a 现在可以转 
向在诨正的服务器上完成 测试。 这一次，我们不再获取一个静态 
的 JSON 数据文件，而是要获取从万能糖果公司服务器动态生成的 
JSON 。 需要更新 XMLHttpRequest 使用的的 URL ， 把它改为指向万 
能糖果公司的 URL e 下面来做这个工作： 


始 fO 的獮#器 
-龛1保存 n 

window .onload = function 0 { 

var url ^ http : //gumbaXX*wick*dlyamart.com ,T ; 
var request = new XHLHttpRequ«9t.(); 
request. open{ "GET 11 , iirl}; 
re quest, on load = functianO { 

if (rsquea^.fii^at.us == 200) { 

updates ale a (request, responseText); 


琏变 Cj 个 


>； 


request, send (null}; 

} 
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万能糖睾公司.问题 


现场测试…… 

如果你想不断地从服务器获取 HTML ， 就要把所做的 URL 修改 
保存到服务器上的 mightygmnball.j s 文件中*否则，如果你 
在使用】 ocalhDst , 则要保存到本地硬盘上。现在你应该知道怎么 
做]%将浏览器指向这个 HTML 文件，你会看到从世界各地购 
买万能糖果的人们那里收集到的漂亮而真实的现场数据！ 







% 






CumbaJI 


着 ; m 






唉呀！ 

看起来一切都很顺利，我们原本 
以为现在可 a 喝着饮料庆 祝乂％ 
万能糖果公司完成了一个成功的 


项 tu 可是情况突然急转直 T 。 
是的，徉点太戏剧性 TV €过到 h 
底怎么回事？应该能正常丄作 
的卜 

放松， 深呼吸。来吧，做个合理 
的解释…… 


致 in 琢本 w 巧 &- 
绞祕傲 1 充分 的检杳 ， 
宏食可 K 拿去印 " I ^ T ! 冗 
汶规在汪饵 再来蘇 缄这个 
.) 顿! 
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与 Wet 交流 


惊险错节 f 


页面上没有看到任何数据.在转向实际版务器之前本 
来_切都很正常的…… 


能找出问题吗? 


能修正吗? 


别走开 

…… 


我们会回答这些问题，甚至不只这些问 


与此同时，看看你有什么 想法： 哪里出了 问题？ 如何 


来修正? 


^^BUIIIT POINTS 


■ 要从服务器得到 HTML 文件或数据,浏览 
器会发出一个 HTTP 请求。 

■ HTTP 响应包括一个响应码，指示请求是 
否有错误. 

_ HTTP 响应码 200 表示请求没有错误。 

_ 要从 JavaScript 发出一个 HTTP 请求，需要 
使用) CMLHttpRequest 对象， 

繼 XMLHttpflequest 对象的 onload 处理程序 
处理从服务器获取响应。 

m XMLHttpRequest 的 JSON 响应放在请求的 
responseText 属性中。 

■ 要把 responseText 串转换为 JSON， 可以使 
用 JSON.parse 方法孕 

■ 应用中可以使用 XMLHttpRequest 更新内 
容,如地图和 emaH , 而无需重新加载页 
面。 


_ XMLHttpRequest 可以用来获取任何类型 
的文本内容，如 XML, JS0N 等。 

_ XMLHttpRequest Level 2是 

XMLHttpRequest 的最新版本，不过相关 
标准仍在开发中。 

_要使用 XMLHttpRequest ， 必须从一个服 
务器提供文件和请求数据。可以在你自 
己的机器上建立一个本地服务器进行测 
试，也可以使用一个托管解决方案。 

■ 一些较老的浏览器不支持 

XMLHttpRequest onload 厲性， 如 IEB 和更 
低 版本， 以及 Opera 10和更低 版本。 可以 
编写代码来检查浏览器版本，为较老的 
浏览器提供一个替代方案 & 


你现在的 位贾. 239 


















采访 x.i 


^ y^¥ Internet Explorer, 14 你说过 JSQN 吗 ？” 

Head First : 欢迎回来，继续我们访谈的第 2 部分。我想问问你有关浏览器支持的问题，是不是只有新的浏览器 
才支持你呀？ 

XMLHttpRequest: 人们不会无缘无故叫我“前辈”，从 2 TO 4 年以来我就得到了浏览器的支持，在互联网时代， 
我要算老资格了。 

HeadRrst : 嗯，那会不会过时呢，你担心过吗？ 

XMLHttpRequest : 我可是个善干自我改进的人 t 每过十年我就会以新的面貌出现 e 现在，我们使用的 
是 XMLHUpRequest 的第2个版本，称为 Level 2,实际上，大多数现代浏览器已经支持 Level 2。 

Head First ： 真不错 Level 2 又有什么不同呢？ 

XMLHttpRequest 嗯，首先，它支持更多柘件类型 t 这样你就能做更多的事情，比如踉踪一个请求的进度，还 
可以编写更精巧的代码（在我看来）^ 

Head First ; 说到浏览器支持 ”… 

XMLHUpRequest : 哙，终千来 f ……一直等着它呢…… 

Head First : 我们听到一些谣言，说你和 m 的关系不怎么样…… 

XMLHttpRequest : - ……确实有这样一些谣传……如果你希望我回答这个问题，仔细看看之前对我的访谈就可以 
了。不过，显然你没有奸好研究过。你是开玩笑吗？ XMLHttpRequest 的一切正是从 IE 开始的 & 

Head First ： 是啊，不过 ActiveXObject 和 XDomainRequest 呢？你以前听说过这些名字吗？ 

XMLHttpRequest : 这是我的外号呀！在 M 〖 C 『 OSO ft 他们就是这么叫我的！没错，我承认，我有不同的名字是有些 
麻烦，不过它们做的事情都一样，只需要多写一点点代码就能很容易地处理，而且对于最新的 Microsoft 浏览器 
来说，也就是版本9和以后的版本，完全没有问题 a 如果读者还不太了解这方面，我很乐意在访谈之后留下来， 
确保他们的代码在较老版本的 IE 上也能正常工作。 

Head First : 你心肠 K 好，我们相信这一章肯定会有这方面的内容。- 

XMLHttpRequest: m , 我可是个好人，我不会抛下读者不管的， 

Head First : 我们相信你&不过还有一个问题；你提到 JSON , 你是它的狂热粉丝。你担心过岱 ONTP 吗？ 

XMLHttp Re quest: 什么？我？担心？ 

Head Fiist : 大家都在传言 T 说很多人都在使用 ISON 来取代你 & 

XMLHttpRequest 对， 当然， 利用 JSONP 确实可以获取数据，不过这只是个聪明的手段。我的意思是，想想你 
要写的那些 S 杂的代码，另外再想想安全性。 

Head First : 拜托，我可不那么专业，我只知道很多人说它能解决你没办法解决的问题，不管怎样，时间到了， 
我们的访谈只能先告一段落了 D 

XMLHttpRequest : 哈，真遗憾，不过至少你说“不那么专业”，这确实是事实。 
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、參与 We 备流 

為， 一 A 







_ 




较老版本的浏览器不支持 XMLHttpRequest onload 属性，不过有一种简单的方 
法可以绕过这个问题。 

我们一直在使用 request,onload 定义一个函数，从服务器获取数据的请求完成时就会 
调用这个函数。这是 XMLHttpRequest Level 2 (可以认为它是“版本 2") 的一个特 
性 g XMLHttpRequestLevel 2 还相当新，所以很多用户可能还在使用不支持这个特性的浏览 
器，具体来讲， IE 8 (及更低版本）和 Opera 10 (及更低版本）就只支持 XMLHttpRequest 
Level l e 有一个好 消息、 XMLHttpftequest Level 2 的新特性都作为改进实现，所以你还可 
以继续在所有浏览器中使用版本1的全部特性，不会有任何问题*只是这样一来你的代码 
可能不能算精巧，下面是使用父 1 ^出《 91 ^叫 110 贫[^祀 1 〗的代码： 


值用 XM : L 的大 多數代 疼却 

function initO { ****** ■ 不过 ，1 中 

var url = "http: //localhost/gumball/sales. j son T， ; 儀 g ft 3^. ^ % it M 

var request = n^w XMLHt^pReqo.est(); 
r eque s t, onr e ady a t at« change = function Q { 
if (request. ready St ate -= 

updat:eSal^B (request. responsoTextJ; 



}； 

request .open (" GET 1 % url); 
request. 3end(null> ; 


&& request ■ statu 包 == 200) { 

S 后检杳确 

粟 Id 

知 (S 數掮 e 经加載。 ’ 


他代砝基本上 
布 I - 样的 a 


如果棊望检奢 ft 他铕 d 汪 
巧以栓杳苒他 rWdgStflU 扣 

£ tfltLi £{ j £ 4 




I 
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检査鄹里出了 

记得难？我们有_个惊险情 
节，这是 一 tbug 

用我们的本地服务器时，所有代码都能运行得很好，不过，转向 
Web 上的实际服务器时，却失败了！ 

我们期 望的： 我们得到的: 



« ，二 14 , 物 

: ■* I - O ^ 9 [ IK 1 4 a nnp ： ,!tKKAMi.'QamD4^jpiia^r^ipaai1LHi 



SVUghty Gum ball Sales 


AHTEStA »ide 

IOS ANGELES » 圮 2 ^urn\3^M 

PPSADEm sold a 0umballEi 


STChCKTOPi s/Qjd 2 gu：<m baits- 
FRESNO 2 flunnbfllte 
SPRING VALUED sofd ^ gymbaNs 


£LVCT,TA Ktd 5 蠡 


SACRAMENTO sold 7 gjjmbaMs 

SAN p^iatk) sold 1 Qum&eiias 


mu i' 



这是使用我们的本地服务器从 

http ： //localhost/gamball/sales*j son 

提供销售数据时运行代码得到的页面。 




^ ^ . ._ __— 

iiL 。 • ： 1 * : + 巧 w u ■ -I f I —r 

Mighty GumbaJl Sales 


-«■-•• -vMd ^*-r -r< _ 


..-- /-• ^.->-r-. 驾 V，. T» '■ ‘•/ 


这是使用实际万能糖果公司服务器从 

http://gumba 11 . wickedlysmart .com 

提供 销皙数 据时运行代码肴到的页面。 


那么，现在淡怎么办？ f 

没什么，平常怎么做就怎么做，把相关人员 
召集起来开个小会。相信经过共同努力，我 
们（包栝一些虚构的人物）一定能找出问题 
在哪里！ Frank? Jim? Joe? 你们都在哪儿？唤, 
原来你们已经到下一页了…… 



Ajfly , 屑簀侈讧检踏 
S ,徇去郁碎。 
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与 Wet 交流 



仗 i + 们， 忘3我们的蠃 B 吏珈喵项 © 了埤？应 \ 
淡圮得.我们进到过_令典保的闲我打豬 
你们觜定甚祓上鞞域问戆 J , D 为作在从一个期务 
器请求 数裨.而筠承#昨来 t 这1,洌筠 雄认为 
这是一令安全问通 n / 


J^y 


Jim ： 你的 url 写对了吗？ 

Frank ： 对呀，实际上，我还把它键入到浏 
览器，确保能看到期望的销售数据，一切 
都正常啊。真搞不懂…… 

Joe : 我瞥广一眼 Chrome 上的 JavaScript 控制 
台，看到一些与访问控制、來源或域有关 
的东东。 


你现在的位1 * 
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浏览器安全性 

浏 览器安 金策蜡 1 什么？ 

唉，碰到这种障碍真让人难堪，设身处地为读者们想想吧 s 不过， Judy 
说得对，浏览器确实对 XMLHttpRequest HTTPi 青求有一些安全限制, 
这可能会导致一些问题。 

那么，这个策略是什么？嗯，这是一个浏览器策略，如果从某个 
域提供页面本身，安全策略要求不能从另一个域获取数据。想象 
一下，假设你在运行 Daddy WarBucksBanlcxoni 网站，有人闯入广你 
的系统，插人一些 JavaScripU 拿走了用户的个人愔息，并与服务器 
HackersNeedMoreMoney>com 通信对这个信息为所欲为 a 听起来不太好 
吧，对不对？嗯，为了防止诸如此类的事情发生，浏览器不允许你对原 
先提供页而的域以外的其他域发出 XMLHttpReqviests 请求 D 


下面就来看看，哪些 是允许 的，而哪些不 可以: 


JavaScript 代码玎摟受的行为 : 



首先，用户（通过浏览器> 对一个 HTML 页面做出请求（当然*也包括所有 
相关的 JavaScript 和 CSS ) i 


到想 a 的 


■― 个英乐激出碎求 a 





浏览器 


A 页面需要得到 GoodDomain . com 的一些数据，所以对这些数据做出 
XMLHttpRequest 请求： 






婷页®矜數钱 ■&同 —个域。 、 


m 务器很集宍銹 
彷戏俱數搞 a 


浏览器 


GoodDomain.com 
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JavaScript 代踩夺能摟受的 扦为： 

假 设页而 在 GqotfDoma 〗 rr.com 托⑬，现在来看试亂使用 XMLHttpRequest |bJ 
Badb ⑽ laiictfln 镞出数据谪求时会 ; 发生什么广 :_，：.::: . £ 






.. . 二 — 卜： ..十 


翁与前面一样，浏览器对 GoodDonTalrt citrrW: 的一个页面做出请汞，这=兩括包拮 JavatScript 八 
和 C5S 文件（同样位于 qoodDomain.com> ^ 



A 不过 J 见在代码希望从另一个来源得到数据，也就是 BadDomsHn . coiru 下面来看•页面 
使吊^请求这个数据时余发生 伟么： 


英面傻淹 . 

XM 

m , \^ : 



匕一'，到4器卷財这 个碭求 

島页承 .不阄的域 f 鱿金涔 
下 .， : 



浏览器 


GoodDomain.com 


电着趵硪求 < 存它罨 f _> 讳求二蔽 
别铯 I 妄金 菜:略 6设中 i 3迖个 
4求。 




S | 


1 

BadDomain.com 
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回願我们的选项 



通常答案是肯定的。 

假设你是一个开发人员，在为万能糖果 
公司开发代码，通常你能访问他们的服 
务器（或者可以与能够帮你在服务器上 
部署文件的人联系），你可以把你的所 
有文件都放在那里，这就能避免跨域问 
题了。不过 * 在这里不行（也许你已经 
沉浸在你的遐想中，我们真的不愿意打 
断 你）， 亊实上你井没有为万能糖果公 
司工作，你只是这本书的读者，我们没 
祕让几十万人都把他捕文件复翻 
万能糖果服务器。 

这会把我们置干何地？难道说我们进 r 
死胡同，再没有指望了？不，我们还有 
很多选择<> 下面就来逐个了解 …… 
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ft 


那么，我们布彿些选搀? 




1兑实话.我们很淸楚 XMLHttpRequest 跨域清求会失败。不过，正像我们所说的，构建 
应用时你能够仿问服务器，所以这不会成为问题（如果所构建的应用主要依赖你自己的 
数据，使用 XMLHttpRequest 通常是最好的办法）。 

但是，此时此刻，你4能会说“那很好，不过我们怎么让这个代码正常工作呢？"嗯， 
要让它正常 T 作有两种 方法： 


o 计划 h 使用我们的托管文件。 

我们已经在我们的服务器上为你存放了文件，位子： 
http: // gumball*wickedlyamart * com/gumba11/gumbal1.html 

可以试一试,让浏览器指向这个 URL , 你应该能看到 H 前键人的代码居然 
起作用了 & 

O 计划1用其他办法获得数据。 

这么说，在应 fH 所在的同一个域托管数据时， JCMLHttpRequest 是为应用获取 
数据的种很好的方法，不过，如果需要从第三方获取数据呢？例如 T 假设你 
需要 Google 或 Twitter 的数据呢？在这些情况卜\我们确实必须换个角度看问题, 
需要另辟蹊径 & 

确实还有一种基于 JSON 的方法，称为 jSONP (如果你想知道它代表什么，可以 
告诉你，这表示 "JSON with Padding " ,没错，我们也认为这听上去有些怪异, 
不过稍后就会 A 你解释 ） # 带好你的宇航背位，因为它的工作方式有些像“来 
白另一个 星球” （希望你明白我们的意思> & 
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Joe : 太好了！不过，这到底是什么？ 

Jim : 听上去还有其他办法叶以从 Web 服务为应用获取数据 & 

Frank : 我在这方 面一点 想法都没有，我只是有点创造 

Jim : Frankt 我可不认为这是坏我在 google 上简单査 f 一个 
JSONP ， 基本说来，这种方法就是 lh < scdpt > 标记究成获取数据 
的工作。 

Joe : 呵，这样合适吗? 

Jim : 当然合适一很多大型搬务都支持 JSONP , 比如 Twittec 


Frank : 听起米不错呢 6 


Joe : 嗯，这正是我想搞清楚的 t 我的意思是说，怎么能使用 
< S cript> 标记作为一种合适的获取数据的方法呢？我甚至不明 
白它的做法。 


Jim : 我自己也只是略知一二。不过可以这样想：使用一个 
< script >元素时，它会为你获取代码,对吧？ 

Joe : 对呀 . 

Jim : 嗯，那如果你把数据放在代码中呢？ 

Joe : 噢，有点开转了，轮子转起来 r . 

Frank : 哈,你是说仓鼠玩的轮子吧* …- 
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菜鸟，生7来。 
我教的东赛你遍常 
轻知逋3 . 
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与 +_..v+b 交流 


舞任酈承势 


HTMLS 离手：……现在也是如此 a 某鸟 



高手： 它会銳什幺？ 

Web 开发 人员： S 会加栽页达会认 wfekedlysmartcom 的 dog 相加 
DUavaScrfp-r, 达个代铒会瀵用 alert 焱數.所认我会暹到洌览鼉袅 
示一令拽示 “woof ” 的成瘙 e 

离手： 达仑谀，由兵一个域沒供齣 JavaSeiipf 丈件砑 你酌谢 K 
费的一个 & 数？ 

Web 开发人员 ：噂. 既然你达么说， S 手，我想是迖样的。 do fl Js 
丈件在 wMcedlysmarUoiH . 获取这个文件，轼会在我的洌 K 棵 

中调用 akrt a 

离手： 馋会在 fitf p: 々 Wickedlymart ■如 m/hfhtml 财 ha|>fery(log2.j5if 
利奚一个丈件 . M 中 & 宮的 JavaScript: 



离手： 达兑会做什么？ 


你现在的位置 
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高手教你 |WU 



Web 开发人员 t 这和 dogJs 很类保，不过钇进用一个凾数 an [ malSa \ f 3。 另外它韦两令参 
数而不是一个：动粕类型和劫粕声杳。 

裹手： 你来 flfi 鸾这令函 ifcaWmalSaYs . 搏? E €埯加到 STMI * 件首 SP 的一 ^< script > x * 
中，故在洩向 w [ ckedlYsniartt §< wr 〖 pt >^ 最上® c 

Web 开发 人员: 迖样怎么样？ 


function animalSays(type, sound)( 
alert【type + " says " + sound 


离手： 很好，你进步粮怕 a 观在.妗改另一个 < sedpt >$ l 用，拕箱向 dog . js 的引餌改为旛 
fed 叫2扣. 再在洌 览揉中重新加 栽筠® s 

Web 开发人员：我得到一令 描饉， 吿谛我 "dog says woof " , 

离手： 爯來 看 iShttp : 夕 wickedly 驟 arte 鳴 / hfhtwl 6 Ahapfer 5/ cat 2 js . 把伪的伽 ript >9 
用改为箱向 cat 2 Js , 真试试 5 


animalSays( M cat n f ^meow^); 


Web 开发 人员： 我得到一令拽择，告诉我 "eatsays meow " , 

离手; 所敁 岈， 从另一个域抜供的 JavaSedpt 丈件不仪玎认在代铒中调用它想変的任 
何奋觳，还荈认为我们传逯钇希望飴任钶数揭_对不对7 

Web 开发人员 t 我痤瀵 *5 彳数掩嗔，只有薄个参数。 

离手：参数不軾是数嬅碣？如果我们孢参数改成达#; 


var animal = {'"type * 1 r f, cat", ,T sound° : "meow”}; 
animalSays^animal); 


Web 开发人员：现在为备数 animalSa 界讳入 J — 个参数，它剮好袅一个对象。噁*裁 
着出來？，对有些傀数揭 & 

离手; 你能重写 awlmdSays , it ® 使用达令新对象码？ 

Well 开发 人员： 我來试试…" * 
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Web 开发人员：达撙：么 #? 


function artimalSays ^animal) { 

alert (animal, type + M says ■■ + animal, sound); 

} 


与 We : 交流 



高手： J5 不箝。龙引用玟为箱尚 http://Wkked[ysiiiart.com/hflrrwI 妨 hapter6/do(^,j$_ 苒采试 试 0 男外 
还可认试试 http:/%lckedlysmartc_/hf html$/ciiapter6/eat 变 Js 6 

Web 开发 人员： 太 #3. 用我的新 & 教，达兩个引闲都能锊到你期望的銥果。 

高手； 如果托也数名 anima[Says 改成叩 dateSates 嚷？ 

Web 开发 人员： 离手，痣实在瘙不出来动物和轎果锇售韦 f 十仓 其系？ 

离手 • 先听我的吒。如菜挖 do0j4 重命奄为 saiesji, 輿像 T® 这梯重茸 代码 : 

var sales = [ {"'name 7 ' i ,T ARTESIA ，T , T, time ,f : 13D8774240669, ， T sales T， : 8}, 

{_ T name， ■:” LOS ANGELES 1 % f, time n i 130877 42^ 0669, ， T sales H : 2}]; 

updateSales{sales )； 


Web 开发人员：我好保布点硪白 J 。 我们在通过箝引用的 JavaScript 丈件传遨数痗， S 不 1 使用 
XMLKttp^equest 鱼 a 来获取。 

离手：对的，篥鸟。不过不要 K £ 树本，不见森林 6 我们是不是在从另一个域获取数採？达苟蕞 
XMlHttpKequest ^ 允 if 的 a 

Web 开发人员 ：对， 着起來是达# a 真 的轼® 是布魔法一样。 

离手： 苒进布 什么度法* <« rlpt > 无棄轼是这#工作的 a 达芻蛊你一斑汉来的努力。 珑在孖 飽生#，鼉 
想这是：么戗的, 坨它宰 牢记住 9 

Web 开发 人员； 好的， ** 牟牢圮伎”…"■达活咁*粮 fe 悉.不过我实在想不起采在蜱簋咁过。 



劣祥时洵 _ _ 

要想有点成就，你必须学会使用 JavaScript 获取数据 & 拿出一张纸，或者 
可以用这本书的书皮背面。画出一个服务器，存放你的 HTML & JavaScript 
文件。另外在另一个域画一个服务器，其中存放文件 dogSjs 和 cat 3 js 。 现 
在来完成浏览器得到和使用各个文件中的对象时所用的各个 步骤。 等你 
觉得自己确实掌握了 T 我们再一起来完成这个过程。 
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jsonp 回顾 


认轵删 P 


你 d 经了解了， JSONP 是一种使用 < sc ； Tipt ># 记获取 JSON 对象的方 
I 这也是一种获取数据的方法（冋样的，采用 JSON 对象的形式> , 
它可以避免 XMLHttpRequest 的同源安全问题。 


下曲儿豇逐步分析 JSONP 是如何I 作的; 


m 器 





<1 doc type html> 

<html lang="eR Tl > 

■■ p ■ ■ ■ ■* 

< body > 

<hl>Wighty Gumboil sales</h > 

<div id= ， , sales”> 

<MiV> " mball wickedlysmart . com /^ X / s ^ iP ^ 

<script a3 ： C = T _http :〃 y 

</body> 


(T\ 我们的 ttTML 中色栳一 

wiipf 的鼉 衮粹土嚴一个 
WcbM 务的 Uia , 达个 WKb 
贐奔将为我们霣仿敷樺的 
4 S 0 N 对象，釦万瞌 Mm 公 
司的铀售数嬅 D 






(5) JS(m 唤应的形式蛊字符 
<^串，羼谂浏 览囍 驊析和》 
择。任何教埯类型邾会转妹为 
庳 £«yavaScrtpt 对象和值.其 
外箝有 ft 码轱禆执行， 


雲记 ( i , C 箱 ( iP , 暑 
M 象的瘙表汙! 



(5) 澍这暴遢到页®中 
i ( kacrlpt >：^ 康对， 
It ^ rcURUit-^HTTf 

锖求 B 


( S ) 咅苒值对#其他 HTTP 谙求'-榉龙 Jl 


Web 服务 
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w 元棄 a 这个 

serfpf 的谋龙一令 Wfeb »# 
的 UKt , 这令 Web 服#讲为 
我们拽供此 OH 数描 a 


d 、 - .—— 

ddwtyp* ht*l> 
<h±Ml 1 


< hdrdy > 


那么 JSONP 中的 “ P tt 代表 什么？ 

嗯， 对于〗 SONP t 首先需要知道，它有一个让人不太明白的 名字： "JSQN 
with Padding ” （有填充的 JSON ) D 如果让我们来取名 t 我们会把它叫 
做 "3 SON with a Callback " (有回调的 JSON ) 或者“给我一些 JSON , 等 

你返回时再执行， T 或者， 实貼 上可以是除『 "JSON with Padding " 以外 
的任何 名字。 

不过，这里填充 （ padding ) 的含义就是在请求中返回 JSON 之前先用一个 
函数来包装。它是这样工 作的 ： ^ %u 


\ V 与 Web 交流 


J 






</b«ly> 


( 4 ) 蘚析和 HftJSOW 啗 

w 按鰣，它包装在一令备戢嫌 
用中 □ 箝敁会镄两这令也數，并 
坨也 JS 0 N 串铜遵餚对象 ff A 达个 

&BU 


(2) 鸟前®-禅.闲 

<« r !| rt > 元最，并尚 src 
imu 送一个 WTTPm 


Ca — ; 龙 json 忽装在 
- 个*廒调用中, 


飞 


updateSales( 

@仍岛前®-祥，驵奇器正常处违迖个媾求， 

W 篇 ® JS 0 N , 不过..…-这一郏分稍搞布盘 g 荆。 

■务 羅龙跤 JS 0 N 宰之前 • # 先把它 包浆在一个备 
数通用中，如 updateSateA 谲庳。 



Web 服务 
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处理 










我窠 麝麝如 何馑兩 <» crlpt > 标伦吐洌这 a 
获取 JavaScript , 另外猫务鼉怎么抱达个数提故在 r 
JavaScript <»不过，凾轂名嚷？ Web ® 务怎么知道正碓^ 
的焱戤名 Jlf 十么？比方戎，万陡糟菜 Web ® 务怎么輙埴/ 
31 updates ales ? 如寒我笮苫外一个服务，我想让它 

进瘌一个兩数*比 fcMipdafeScort 戏者 alert . 成者其他什么 
蚤数》怎么飯到璀？ 


Web 服务允许你指定一个回调函数， 

一般来讲， Web 服务允许你指定希望如何命名函数。虽然我们没有 
告诉你，不过万能糖果公司已经支持这样一种 方法。 它的做法如 
下：指定 URL 时，在末尾增加-个参数， 就像这样。 

http : //gusaba 11 ■ wiekedlysmar t • com/?callbacfc=updateSales 

.. 7 * , 4 m ^ x iif 坩加 5 —个譽 

f =.' 广 i 4 [ ㈣ 占― ㈣ 賴祕赵 

MightyGumball 向你发回 JSON 对象之前，会用 updateSales 包 
装这个： TSON 格式化对象—般地， Web 服务将这个参数命名为 
callback , 不过请查看你的 Web 眼务文档，明确 Web 服务实际使 
用的参数名。 




尝试以下 URL : 响应中会看到什么？ 

http ： //search .twitter* com/seairch *3 s f html 54ca 1 lto^ck=myCa 1 lb ac k 

http: //search. com/search .jsan?q^hfhtml5ficallback=justDoIt 

http://s©arch. twittejTiCom/sea^cli.json?q=hfhtml5sca ： Ubac:It=updateTifeet3 

触; FLrrf ^ 含 1 求伢打咸俘存一个丈#,访巧以用 
wotfpnrfll 老 fi ⑦基本芄本媒弑苕勿科 e 
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与 交流 



O 


S 騎黍 M 



Jim : 嗯，几乎可以这么说。 

Joe : 我认为这实际上允许我们删除一些代硏。 

Frank : 等你完成之后 T 我打算让它变漂亮些 

Jinn : Joe , 你是代码髙手，是不是有什么想法了？ 

Joe : 用 XMLHttpRequest 时我们会得到一个字符串 & 使用 JSONP 
时， scripifcki 会解析并执行返回的代码，所以等我们处理数据时， 
它已经是一个 JavaScript 对象了 5 

Jim : 没错 s 使用 XMLHUpR 叫 UeS 财，我们要用 JSON.parse 把字符 
串转换为一个对象。现在是不是可以把它去掉了？ 

Joe : 对。这就是我的想法，我一直这么想。 


Jim : 还有別的吗？ 


Joe : 很显然我们需要插人 <script> 元桌。 

Jim : 这里我有些不清楚。要把它放在哪里呢？ 

Joedg , T 浏览器在加裁页面时会进行控制，我们希望先加载页面， 
这样调用 upcUteSales 时就能更新要处理这个问题，我能 
想到的 唯-办 法就是把 < 3£ ^:1^1:>放在页面 HTML 体的最下面 D 

Jim ; 对呀，听上去是个好想法 D 我们应该再深人研究研究。不过， 
作为初学者，先来试试吧 

Joe : OK ， 我真希望这个代码能正常运行！输入代码吧！ 

Frank : 你们最好快点，我打赌 Judy 已经完成她的版本了 D 
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重新实现: 

E 新方能糖果公司的 WebS 用 

现在来用 JSONP 更新你的万能糖果代码。除 T 删除现有的处理 XMLmtpRequest 
调用的代码外，并没有太大的修改 D 现在就来完成这些脩改： 

我们需要做的 事情： 

(T) W 眛 XMLHttpReq ⑽ st 代鸪。 

(2) 碥保 updarfeSaiestfe 数准备捿位一个对象，布不篪一个 
宇符$ (鸟) ( MUHtpR 叫 west 不间）。 

(3) 增加 < scr 〖 pt > 元索，真体完成數揭荻取^ 



(?) cwload & 数中的 箝有代 码難乌 XMLHnpReqt/est 有兵，所冰玎认托 它完全 蒯除。不过我 
们逄是保留？达个 owioad 凾数*-认 旮认后还 tS a 对子现在来说，达个菡数 ft 么也不 
俄 & 打幵 wifllrr 刊 uwballja 太件， 做认7 獠改： -■ ■ ■' 


•a ' - • ■ 


:-:+ rz^=-： — ~ t -—- "' ~ —"" "-: -' ■ ‘二■■- 二' :- - - ...■' ~ J 

var urJL - ^fattp://guiiJpaIl.wicVedlysmart,cam" V '_ " .. …一 _ 




rar request = ntsw JEMLHtrbpRgques L (); 


'.TT . . i ~ 7 '_ __ 7T . £«■.•.- - T ^ 




reefuesfc . open ^ 




lixl ) 」 




■ - ■ ■■• —‘> ■…- ,..■： 


1 个 S 數令的 .-■—. 




~ " ■"* ' . , 


■■--■■■—- 

*v- -；•.-*• - -: ， : 二，二一 .•: 
: - : ■，-■— ..:••■， . . ■ 


, onload = functionQ 

.■ jm ' - " ■! — - ' ._H., ■ 一 I ■*i* ■ . ■，！■■■■ .rr-i. I ■."j • "• •' 

■ ■■■■■ ； ■•- _ ■ -■ . _ .. ' ■ , , ■ ― •? W . •■ . 一 

if (rcquest.statas - 200) 

\ • •，■■_-_ _ - ■- _ ■•■_■ _ T 

■ - ■■ ' ■ 





■ - . ： v- 


… ：匕 


xipdateSales (request, if egponsieText fr 


■- 


--- ■- - • 


... 


.--■ 一- . T ■ ■ 






… _ :! •- 二… 


fa que s~t ^ a gnd( null.) 


- : 三 ： k : ? 二 


^ ' r ■’ 
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捿不来，按该纪锊，使 ffl < scrlpt > 元索衬就是在告坼洌 K 器* SS ® UavaScript , 完成 
晬析#故行。这谀蜊，它衹行到你的 updateSa 〖《 凾敎时， JSONB 轻不苒是字符每肜式 
1 ,茹是一令真正的 JavaScript 对象。我们原先使用 XMLHttpRequesf 对，數掸系 ffl 字 
符串的 形式返珍。现在 updafeSales 含认为 它得釗的蛊一个串， 所认苓 ® 俄些枝改，让 
它处理一个对象，芮不是字符每： 



f-unction updateSal^a (re3pongeTgxth~ f ffil ) 餘 rt^pot^seT&xt, 鴦写这 

function updateSal«ft("■' 代坏 ' 4 ■& 4 


var salesDiv = document,getE 1 ementById ( IT sa 1 es IT ); 

v»r saleg = J 30 W « pgraa { reaponfleTflAt >, - ™ i 5 ^ fl 

for {var i = 0; i < sales.lengtli; i++) { parsed^ B 

var sale — sales [ij ; 

var div = document:. creat ， eBlement(^div 11 ); 
div,setAttribute{"class", ,p saleltem fl }; 

div.innerHTML ~ sale.name hk ir sold ,T + sale.sales + " gumballs ,r ; 
no. les Div. app^ ndChi Id (div); 

, a 社兩 3., 规在 6 经冇 j — 

个刁以让運數孩的矗數 ； k 


@蕞后，缯加 < seript > 元*来完成典体齣数提获取。 


<! doc type htunl> 

<html lang= M en M > 

<head> 

<t it le>Mighty GumbalK/title 》 

<meta charsets^utfD 

<script s rc= M mightygijiiLball,j s'^X/scrip^ 

<link r el='" styles he et ，T href^'mightygumball .css M > 达 4 拍余万能轉采 wAb 深务的 M 

</head> 尨。我们 璉用 3 如山⑽成參教，冉 

<body> 

<hl>Migbty Gumball Sale3</hl> 

<div id=”sales 1 ) 

</div> 

<script src= T, http: //gumbalX .wickedly5m«3ct. com/?caXXb«ck=upd«teSales ,f X/script> 
</body> 

</html> 


抱 我«的焱螽 呻办 tcseiU^ 
錡以这个 Wtto 凰务贪碑 JSON 忽装 
在 u _ nt^sales 备教 il 用中 D 
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试一试你的 JSONP 代码 

如果你完成了以上的所有修改，现在就来试一试 & 在浏览器中 
霞新加载: nightygumball . htm ： U 你现在是用你的 Web 应用和 
JSONP 加载万能糖果公司的销售数据^页面应该与从本地文件 



获得销售数据时看到的页而相同，不过你很清楚，目前在用完 


全不同的方法获取数据。 


重靶加栽万能栲菜公司 
费®金着1_)达个 结羼， 
Cf - 遘利的可能矗冬®的 
喊年和稍«惰* ■ 
ii 叻袅真实數掮 a 


… Cum^biN 

Mighty Gumball Sales 

IMPERIAL sold 4 ^umbaHs 

SAN FRANCISCO sotd 5 gym balls 
CHJMO HILLS SOW 8 gym balls 
STANFORD sotd 3 gunnbslEs 
CARSON sold 9 gumballs 
GOLETA soFd 6 gym baits 
BRADLEY sold 5 gumbos 
CAP AY sold 7 gumballs 
LANCASTER sold S gym balls 



SAN QUENTIN sotd 5 gumt>aJls 
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对我来说， JSONP 着上去值蕞 
个饿大的安金邋 


m 




使用 < sciipt > 加载 JavaScript 就不再有安全了 D 

这话没错：如果向一个恶意 Web 服务发出一个 
JSONP 请求，响应中可能会包含你不想要的 
JavaScript 代码，而 且浏览 器会执行这些恶意的 
代码。 

不过这与链接其他服务器上托管的库来包含 
JavaScript 并没有不同 6 只要链接到 JavaScripU 
不论是在文档中链接到一个库，还是 
使用 JSONP ， 都需要确保信任这个服务。如果你 
要编写一个 Web 应用，其中使用认证来授权用户 
访问敏感数据，可能最好的办法是根本不要使用 
第三方库成位 T 其他服务器的 JSON 数据 D 

所以要谨慎选择所链接的 Web 服务。如果你在使 
用像 Google, Twitter, Facebook 或很多其他知名 
Web 服务的 API ， 那么你是安全的。否则，最好 
当心一点。 



对于我们的情况，我们私底下认识万能糖果公司 
工程师，而且知道他们绝对不会在： TSON 数据中 
加人任何恶意的代码，所以我们是安全的，可以 
继续。 
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Fireside Chats 

mm 









苺漱 > 身 _ 

今晚 话题： XMLHttpRequest 和 JSONP 

今晚我们请来了从浏览器获取数据的两种流 ^ 


行方法。 


齟 



JSONP: 


XMLHttpRequest: 

我投有冒犯你的意思，你不过是耍小聪明吧？我的意 
思是说，你的 H 的本来是获取代码，人们却用你来处 
理数据清求。 


不过，你所做的无非是在代码里加一些数据而已 Q 你 
井没有办法直接从 JavaScript 代码做出请求 T 还得使用 
一个 HTML<script> 元素。这会让你的用户很困惑^ 


嘿， XML 使用还很广泛，不要泜毁它。用我一样能很 
好地获取 j SON a 

至少，用我就能控制把哪些数据解析为 JavaScript。 
如果 用你， 可没办法控制 ，不管怎样都会成为 
JavaScript Q 


嗯，你可以采用一种技巧来做到，比如 JSON-Wkh- 
Padding ，呵， 真是个怿名字 D 或者，你也可以便用 
正当的方法，这就是 XMLHttpRequesi, 并随它的成长 
而成长。毕竟，人们一直在努力让我在保证安仝的同 
时更为灵活。 


小聪明？我倒觉得这应该叫精巧。既然可以用同样的 
方法来获取代码和数据，何必还要 两种单 独的方法呢？ 


嘿，不管怎么样，这个办法是可行的，人可以 编写代 
码从服务获取 jSON, 比如 Twittci ■和 Google , 以及很多 
其他的服务。而你呢？你是有安全限制的，所以利用 
XMLHtlpRequest 可做不到这些。我是说，你还在活在过 
去的岁月里，固步自封，还坚守着 “XML ” ，是吧。 


当然，如果你希望一直用 iSON.parse 解析结果。 


这应该算是个优点 a 我的用户得到数据时，都已经为 
他们解析好实陆上，我很尊萆你，你费了老大劲 
编写应用来做到这一点，不过问题是你太过苛刻了 E 
在今天的这个 Web 服务世界里，我们要能向其他的域 
发出请求。 


当然了，人们确实是在努力寻求新方法，不过我的用 
户可等不及了，他们现在就需要。他们可没办法等你 
慢慢解决所有跨域问题6 
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XMLHttpRequest: 


我和 Ajax 这个名字没有任何关系，所以不要问我！另 
外，你是不是从来没有提过你安不安全？ 


我所说的是，如果你不需要得到其他人的数据，比如 
Twitter 或 Google , 而且在编写你自己的 Web 服务和客 
户, 就可以用我我会更安全，而且使用起来也更直 
接。 


那当然，不就是混杂嘛! 


喂，即使老到 IE 5, 要让它支持我并不需要写多少代 
码& 


没错，不过不只是这些吧，你试过做重复的事情吗？ 
要知道有时候得反复获取一些东西 Q 比如他们正在处 
理的万能糖果数据。怎么做到呢？ 


如果我是你的读者，听你这么说我的第一印象就是 
“你在说什么 呢?” 


JSONP: 

而且 “ padding ” （填充） 一点都 不怪，它的意思是， 
用户做出一个 Web 服务请求时，还会要求为结果增加 
一个小小的前缀，比如“ updates alesO ” e 还记得吧， 
原先人 fH 是怎么称呼你的？ Ajax ? 像不像个浴室淸洁 
器？ 


编码人员必须很 谨慎， 如果你在从另一个服务器获取 
代码，当然需要 知茧你 在做些什么。不过，你的做法 
似有不妥，对于这种请求，不能只是回答 “不 要那么 
做”。 


拜托！如今还会有人编写不使用外部数据的服务？听 
说过 “ mastmp ” （混合）吗？ 

嘿，別用这种口气,至少不沦在哪里我都能得到 
—致的支持.我真不喜欢编写那些应付老浏览器的 
XMLHttpRequest 代码。 

哈哈，对我来说可是什么代码都不用写的。只 需要一 
个简单的 HTML 标记。 


嘿，没那么糟吧，要处理另一个请求只需要在 DOM 中 
写一个新的 < script > 元素 D 


HEAD FIRST ： 

感谢大家热烈的讨 i 仑！很 遗憾， 时间到了! 
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让大脑动一动 t 做个： NP 练习 






Ji 




挪 


你还昜一点点 ， 我原本希 a 康刻來§嫌粜\ 
钒的不断煲柘的铕 售數猓 改。当然 t 我订 
敁不傳玷副新我的浏览 s , 不过摩时我 ® 能 
瘙到最籍的报告.而 m 汽有崧我手劫刷柘畤才 
能4钊 & 达玎不蛊我想典的 f 


十 ‘參 

♦往齟承參 


o 



他说的对，我们还要修改我们的应用，让它能定期以某个间隔（比如说，每10 秒） 根据新 
的销售数据更新显示。_前我们只是页面中放置了一个< 5£ ^时>元素,它只向服务器发出 
一次请求，你能想个办法使用 JSONP 连续地获取新销售报告吗？ 


级矛: fj 用 DDM . 我们芍 W A 否®插入—个 
軔的 < so _ t >； tf s 这含耷帮助唾？ 
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Jim : 是啊，他希望显示中数据能不断更新。 

Judy : 这是有道理的，我的意思是， Web 应用的一大优点就是不 
用像 Web 页面那样反复刷新， 

Joe : 行了，我们当然知道如何用 DOM 将页面中的老销售数据替 
换成新的销售数据，不过还不太确定怎么处理 JSONP 。 

Judy : 要记住，利用 < script > 元素也可以使用 DOM 。 换句话 

说，只要你想获取更多数据，就可以在 DOM 中创建一个新的 
< script > 元素 s 

Jim : 对呀，我正有这个想法 4 能不能再讲讲？ 

Joe : 我觉得我有点明白了。目前我们只是通过键人把 <S C ript> 
元素静态 地放在 HTML 标记中 D 可以不这样 T 我们完全可以用 
JavaScript 代码创建一个新< script >元素，并把它增加到 DOM s 
但有一点我不能确定，创建这个新的 < scri P t > S 素时浏览器会 


完成下一次获取吗? 


Judy : 当然会。 

Jim ： 我明白 f , 这么说，只要我们希望浏览器为我们完成一个 
JSONP 类型操作，就可以创建一个新的 < SC ript > 元素 D 

Judy : 太对了！听上去你确实懂了 D 那么你知道怎么反 S 做这件 
事吗？ 


Jim : 嗯，这个我们还没有搞清楚，我们还在考虑 JSONP 呢。 

Judy ; 现在你们已经了解处理函数，比如00103：1或 0 1^1：^]<：。可 
以建立一个定时器 * 在 JavaScript 中使用 setlnterva 】 方法以一个指 
定的间隔调用一个处理函数。 

Joe : 好的 5 现在就来建立这个定时器吧，尽快让万能糖果公司 

CEO 看到正常工作的动态 JSONP 。 

你也这么想？那么现在就动手吧！ 
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实现动忠的 jsonp 

改迸万能糖果公司的 We b 应用 

可以看到，我们还有一些工作要做*不过情况不算太糟糕。实际上 T 我们已经 
编写/我们的第一个版本，它能从万能糖果公司得到最新的销售报告并显示， 

不过只是一次 Q 这可不好，因为如今几乎所有 Web 应用都会持续不断地监视数 
据，并且（近）实 M ■地更新应用 D 

我们需要做的事情： 

(?) *襄认方躲嫌果 UXMlm 除 JSOtff<scripty 无薰，诨为不爯值用达令 x 素 

3, 

@ *8 建交一个处过秸序.«瞄几秒轼傣 出一个 JS 0 NP 请求 。我们 

会季纳 Judy 的建议，值用 JavaScript 的 seftnterval 方法。 


@然后 f S 在达个处3«序中矣现 JS 0 NP 代码. 值锊«次镝用迖个处璞 
我序封含崖出锖求，来锊到通新的万能韆菜公 笱箱售 級巻。 


第1 步： 处理 script 无棄 . 

我们要用一种新方法调用 JSONP 请示，所以从 HTML 中刪除原来的 < sc r ipt > 
元素。 


令 5 I 夕 
苗 I > I 挪 


<!doctype html> 

<html lang="en_> 

<head> 

<title>Mighty Gumball</title> 

<meta charaet=’_\atf-8 r _> 

<3cript src= T， mightygumba 11.j s ,T X/script> 

<linlc re 1~ M stylfiaheet H hr©f= T, mightygtiaiball. css M > 

</ head > 

<body> 

<hl>Mighty Gumball Sales</hl> 

<div ld= M sales M > 

</div> 

<acript 3£C- ,J 1iLL^.//<JTmtb^ll.wickgdlysntai.i T u. urn/a 1 iba uy lIaL tjSdIea "x/ser±pt> 
</body> 

</htcnl> 


芍 1 访的 HTMLt 
^今鲥餘 H 个 大景。 
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第 2 步： 现在来建 5 定时器 

好的，我们从只获取一次销售报告起步，向每隔一段时间就获取一次销售数据前 
进，比如说每隔3秒，对于不同的应用，这可能太快或者太慢，不过对于万能糖 
果公司，我们先来考虑间隔3秒时间。 

要想每隔 3 秒做某件事情，需要有一个能够每 3 秒调用一次的函数。正像 Judy 提到 
的，可以使用 window 对象的 setlnterval 方法来 做到； 我们可以这样做； 



setInterval(handleRe fresh, 




3000 ); 



m 时间闵陲,輩治光毫#。 
毫秒= 3秒。 


所以每隔3000毫秒 JavaScript 就会调用你的处理程序，在这里就是要调用 
handleRefresh 函数„下面写一个简 黾的处 理程序来试一试^ 


function handleRefresh 0 
al©rt.{ M I , m alive" 


备次 iMMii 个岛敫的 (茗踢 3 # 试用一次） * 裁 
& ■ / 们含给 si — 个祛 H •丫从 fliivc ，r (我 [5 璉看 ） 。 


现在只需要一些代码建立 setlnterval 调用，这些代码要增加到 onload 函数， 
整个 W 面加载之后就会立即建立这个调用； 


window.onload = functionO { t 

aotlntervalthandleR^frash, 3000}; |*j 代砝 

} t 后 9 Hi 也不傲 s 





下面来试一试，确愔它能正常工作。也就是说，等我们看到每3秒调用一次处理 
程序时，再来实现〗 SONP 代码。 
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测 试问隔 定时器 


时间驱动的删试 



这应该很有意思。确保你已经键入了 handleRefresh 函数，而且对 
on load 处理程序做了修改。保存所有修改，井加载到浏览器。你会看 
到一串提醒，你必须关闭浏览器才能让它停下来！ 


M | 挪 



r^arpen your pencil 


既然已经了解了 setlnten/al (当然还有 XMLHttpRequest 和 JSONP) ,想 
想看在其他 Web 应用中还能怎样使用。请写在下面； 


检杳和€軔一个仔务的宪威进皂,科氐矛 
杳卷#个 i 砝是若援交1新讶袼„ 

■ T 1 ■ 9' ■ V ■ r ■ P ■ B ■ r ■' B ■' B ■ ■■ II B 1 ■ 1 ■V l _T'H_Bia'_iT_ ■■ B ■ t B 

如果有姻雇奋的迫法现，弒更射蟪 g ), 
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第 3 步： 重新实规 JSOHP 

我们仍然希望使用 JSONP 获取我们的数据，不过需要一种合适的方法，只要调 
用了刷新处理程序就会获取数据，而不是只在贾面加载时才获取 • 这电就要用到 
DOM 。 DOM 的过人之处就在干，我们可以在任何时间向 DOM 插入新元素,| 至是 
< s _ cript >7 n -^ 0 所以 * 只要想做出一个 JSONP 调用 ， 就能插人一个新的 < seri ^ t >7 t 
素* F 面利用我们对 DOM 和 jSONP 所掌握的知识，编写一些代码来做到 这一点 6 

蓄先_ 建 iJSOHPURl 

迖乌前®儍用 acrifrfx 最时所用的 UHL 完全相在达里我们坨它賦紛一个 
耷鼍 t 试备呔 后使用 。谢眛处理裡序中的 alerttfl 用，稃增加认 r 代铒： 

闵纠我 fn 的 

( m mo 1 ^ 5 JSoni > 

^ f URJL r 4 把它蛾 

function handleRefresh {) { V 

VAf url se FP http : //gumbal. 1 . h lake dlysmart , cotn?c&l lback«upd ate$«le s "; 

) 



接 T 来， 创建一 个新的 scripts 素 

现在, 不爯将棄故在 HTML 4\ 要值用 JavaScript 建交一个 < seript > 
元棄， t 装创建达个元棄*然后进 I 它的 src 和 W 禺性： 


function handleRefr^sh() { 

vjir url = "http://gumball.wickedlysmart + com?callback=xipdateSal©s f, ; 


var n©wScriptElemftnt = document. CjroAt^Elein^ntC 1 'Acxript H ) 
n«wScriptElemant.- b etAt-tribute ( 17 axe", url); ^ 

niavrScript£ lemen t+s e tAt^r ibut« ( ,T i d r \ " j s onp 11 ); 


t 


的你来说， MtAttribwU 方法看 I ： 去芍鲒 冇些帘 法（刊 0 前巧戧 
们兩箄地 md 过） t ； ra 俅容蹇看出它屢鈑付么。 wtAttra^te 


IS 先 D 遠 一 个新的弘 ri ^ t 无 
" ……埒达个元景的 sm 属伐设更碎 

另外# (I 个 script 光素痄安一个 id , 
从葙軲審另地縳到达个;后 

个无黃。 


方法元荇 汸设 E — 个 HTM L 无棄的 M ti T 如 sn; 和 H 厲作 . S 老差石 
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JSONP DQM 插入 


如何在 POM 中播入 script ? 

就快完成任务了，现在只需要插人新创建的 script 元素。一黾完成插人，浏览器 
就会看到它，并完成相应的 X 作，发出1301^^请求 0 现在，要插入 script 还 ■ 要 
预先做些计划，下向来看如何 做到： 


% 1 . 






t . e 鼷承參 




I 


VtilU 



^ 7 \ 最拟的 POM 龙布 M Jiottp - 
^ f«rlpi> ( 后筘 . 我们 P ， 布一 
个薄揉利 JavaScript 代辟齣 

<urfpt >} 。 


title I j meta L script L 



@ 在我们的代铒中，纛粟得到 
^ < hea 心无 最的 一 t 


script id/jsonp" src= w http://gumbcfl.wicked.* 




然启興挖迖个斯的 < s ^ rlpt > i & 康捶 
入列 < head > 无暈， 


一旦插人 script , 浏览器就会看到 DOM 中的这个新 script 元素，并获取其 src 城性指示的 URL 
上的内容。我们还有另一个用例 D 下面就来看看这个用例^ 


哚 J 第一次 ti WhatuJkRefresh 
外 . POM 中 B 錢布？ 一个 1 laowp- 



在这种《况 f , 我们雯再 
次锊利 head 无 * 齣 ？ I 



( 3 ) 戟们霹 ft 现有的茏最揀成我们的斯元*.兩不 AJE 新 《rirr 

S 加 WWJM 的最疟，遣加达令新 wrtpf 也 I 可吆 的，乜 ftlfia , 埘 K 
0 也会完成 JMUP 请用 B 不过*达柙一来，过一戽_间后，弒佘在 
P0M 中剞建一大飧的<«*^1 > 元棄. 这玎能会影硪性陡，所试髻接无#的 


僦法会 S 好一些 & 
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现在編筠代钨将达个 script 插入到 ROM 

觫然 e 羟知埵步骒 3 * 来金#代码 a 闯韓冇 两步： t 先绐出增加一會新 

«rtpf 无棄的代码 • 然后給出替换财 ipt 的代码 c 


令、 


与 We L 交流 





function handleRefreshO { 

var iirl - 11 http : // gumba 11 .wickedlysmart. eom?callback=updateSales M ; 

¥ 光铒 »< 站¥>尤#的？1用, 

var newScriptElement = document.createElement('Script M J ; 如果不存在 奶这 ©mdU ；i % 
nswScriptElement.setAttributs ( M src", url}; / '[i f -f $ ^ ^ j£^ ，r D 

newScriptElement.setAttribut«{ M id ir , ^jsonp^); / 


v 在 r oldScriptElement s doeunwnt a getElem^ntByld(jsonp T, ); 
var head = document. getKlementsByTagblame ( M head ,T ) JO]; 
i£ (cldScriptEletnent = null) { 

head. app^ndChi Id. (newScr ip tE lament.); 



S 下柒，消東一个靶的 

的射用。 后而还会爯來 {:j 论这个 

不过规奋 c 電 j 
和遷它金涔 f A J 棄的幻 

用魷弓以 J 。 


^然有- 1 . I ^ Cffd > 元嚎的 _个引用^疾 存奎看 含基否3径奄一个 < scir [^ t ： >;^棄 
如蓽没有（真？ | 用片 wuLL ). 狀龙运 个靶的 <sc 咖 t>x fli 加一咖 3t t 


好 3* T 茧来邊如果 wriptx 素 B 轻#在时蝥掙怵 riptx * 的代码 a 这里 H 绐出 If 
彔件语句，箝有新代鹆#出琛在 达罡； 


Cii 还基 庳来的 条件.意谂只4啻€ ddm 中1柔 e 线存存一 
( 个 走嚎 3 

if (oldScriptElement == null) { 

head, appe ndChild {newSc rip tE 1 eme nt); 

} { 

head« replaceChxld. (newScriptElement, oldSc ript:El em« nt ); 


^ 如某 had 中 5 绞眘一个 . 统 P, 是 f 箨个无黄。 ^y ， t± 

V < >无脅上使兩 relict ucMild ^ r f 名入老的和篆 的: t 素来 i . 我 
tM , 杖后 S 舍泛碑細地付论这个漪方法 d 
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更多 DOM 方法特写 


A 


getElementsPYTagMame 特写 




A ^ I - 

參 


撕 


这是我们第-次见到 getElementsByTagName 方法 T 所以下面就来仔細研究研 
究。这个方法与 getDocumentByld 有些类似，只不过它会返回与一个给定标记 
名匹配的元素数组。 

dom 中节迖个杉记的辦 令认〜 

var arrayOfHeadElements = document. g«t:ElQmentsByTagNaiiiQ { tT head TI ) i 

rtnw . 

个 loead 天■棄 fe 迅。 


承參 


一旦得到这个数组，可以使用索引0得到数组中的第 一项: 

var head ^ arrayOfHeadSlements [0] 


达®數通中的弟一个 
无黃（在汸只有一个 Wad 
尤蠢. ) 


现在可以把这两行代码结合起来，如下 所示: 



vax head « docuMent.ge'tElementsByTagNaitie("head^HO ]； 

P^M — 诤, 羌饵 f ) 盘通 
再壹薊數组佴的苐-磺 s 


在我们的代码示例中，总是使用第一个 < head > 元素，不过你也可以对任何标记使 
用这个方法， W < p >、< div > 等,通常得到的数组屮不只有一个元素。 


replaceChlld 特茸 


再来看 replaceChild 方法， 因为以前你没有见过这个方法。如果想替换一个元 
素的子 元素， 可以对这个元素阴用 replaceChild 方法，同时传人新子元素和老 
子元素的引用。这个方法会用新元素替换老的子元素。 


无縈把达的一个孑光秦 
0 Ids tKpt 勞戚巧史子尤黃 


裁们的 ft 

< sart . pt > x ^ 


资®中6笮的 

c script ： > 。 


head . replaceChildtnewScrlptllement , oldScriptElement ) 
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问： 为什么要替换整个 < script > 元素，难道 
不能直接替换 src 属性中的数据吗？ 

答: 如果只是用新 URL 替换 src 属性，測览器 
不会把它看作是一个新的 scdpt 元素，所以它不 
会发出请求来茯取 JSONP r 要强制洲忆器做出 
请求 5 必领创建这个全新的 script 元素这种技 
术称为 “ 脚本插 八#。 

替换子元素时 Y 老的子元素会发生什么 
昵？ 

答: 会从 DOM 中蜊除。此后发生的一切由你 
决定：如果你把它的一个 U 用存储在一个变量 
中，那么还能继練使用这个元素（只要合理， 
可以采用任何方法> a 不过，如采没有变量保 
存它的用、 JavaScript 运行时專可能最后会回 
收这个元素在到览器中占用的内存空间 3 

M :如果有多个 < head > 元素 呢？ 用0索引 
getElementsByTag 返回的数组时 T 你的代码看 
起来要求只能有一个 head , 是吗？ 

答： 枨据定义，一个 HTML 文件只有一个 
< Jiea . d > 元素 D 当然了， T 能有人会在一个 
HTML 文件中键人两个 < head > 元素， 在这种情 
况下，你的结果可能会有所不同（如菜没有验 
证 HTML , 就会遇到这种情 n 不过，浏览 


t^ereiarc no 

Dumb Questions 




^ * 我怎么知道一个 Web 服务使用的参数呢？ 
另外怎么知道它是否支持 JSON 和 JSONP ? 

答： 大多数 Web 服务会发布一个公开的 API , 
其中包括如付访问这个服务，以及利用这个 
腹务〒以做哪些事情。如果你在使用一个商此 
AP ], T 能需要直接从提供商那置得到这个文 
裆.对于很多公开的 AH , 通常可以通过在网上 
搜索或考由相关组织的 M 站开发人员得到你需 
要的信息。你也可以访问诸如 pro gram the web . 
com 之类的网站，其中提供了 一组 API 的文档， 
而 JL 还在不断朴充 3 

闽： XMLHttpRequest 显然比 HTML 5 要老 s 
那么 JSOW 和 JSONP 呢？它们是 HTML 5 的一部 
分吗？使用它们时熏要有 HTML 5 吗？ 

答： 我们把 JSON 和 JSONP 称竹与 HTML 5 是 
“同时代的”，尽管它们并非由一个 HTML 5 规 
范定义 s 但在 HTML 5 应用中大量使用，它们 
是构建 Weh 应用的一个核心部分。所以 ％ 我们 
说 HTML =标记 + JavaScript API + CSS 时，实 
际上， JSOH 和 JSCINP 也是其中很重要的一部分 
(当然也包括采用 XMLHttpRcquesi 的 HTTP 请 
求 ） a 

^ -人们还在用 XML 吗？现在是不是一切都 
是』 SON 了？ 


器会一如既往尽其所能地保证正确（也就是说， 
完全可以 a 赖洌览器}。 

1^* 启动间隔定时器之后能让它停止吗? 

m 当然 T 以了。 setlruerval 方法实际上会返 
回一个 id , 标识这个定时器。可以把这个 id 保 
存在一个变量中，以后只要想停止这个定时器, 
就可以把它传递到 cleadnterval 方法 3 关闭剜莧 
器也能停止定时器 a 


答: 计算机行 it 里有一条真理，那就是什么 
都不会鈿底消亡，所以我们相信 XML 还会存在 
很长一段时间另外，我们也承认如今 J S O N 活 
力四射，很多正在创建的新服务都使用 JSON 。 
你会垃常看到很多 Wd ? 服务支持多种数据 格式、 
包括 XML . JSON 斡很多其他輅式（如 RSS ) 。 
JSON 有一个恍点，它直接基于 JavaScript , 而 
且 JSONP 能帮我们绽过跨域网 题。 
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处理刘览器缓存 

差点 忘？： 当心玎怕的浏览器 
緩存 

就快完成了，不过还有一个小细节需要注意，这属于那种“如果 
以前你从来没做过，你怎么知遊如何解决”的问题。 

大多数浏览器都有一个有趣的特性，如果你反复地获取间一个 
URL I 比如我们的 JSONP 请求就是这样），浏览器为了提高效 
率会把它缓存起来，所以你会反复地得到同样的缓存文件 （或数 
据）。 这可不是我们想要的。 

很幸运，对干这个问题，有一个像 Web —样老的简便“疗法”， 
我们只需要在 URL 的末尾增加一个随机数，就会诱使浏览器认为 
它是以前从来没有见过的一个新 URL 。 下面就来修正我们的代码， 
将上面的 URL 代码行 改为： 



最上®看蚵这朽代场。 



MS ： 面的 




nrl a= T, http : //gumball .wickedlysmart. c(^/?callb&ck«iipdat«Salfts n 4 
IT &randomtt M + (new Dat« (}) .getTim {); 


裁 f )4 nRL 的末屢坩加； J — 个拓的 
掙的 H 夸數 .， wab 屎务器含将它忽略， 
不过连以鹆 a 别羝器了。 



莪们剖遑？ 一 个靶的如^对象.值用象的 
送来瑪的 ㈣ 问（辈佬的毫秒），然后 
犯 ii 个树问坩加蚵 K ' Fd 的末尾 a 


利用这个新代码，生成的 URL 可能如下 


(i 一郝分在 it 很搀悉 . . 

、 Jz 

http: //gumba 11 . wickedly smart, com?cal lback=upd&teS ales &r andom^lSO 9217501707 

这一郝分落次鄱含处 4 . 认驀翁进免鑲俘。 


把 handleRefresh 函数中的 url 变 量声明 换成以 t 代码，然 
后就可以试一试了！ 
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部学习交流使 用 ， 未经允许不得用于任何商业 用途。 感谢 

您的配合！ 








糾 mu 



















最值得程序员珍藏的200部技术经典系列仅供程序员内 































































与财 I 交被 


爯來试一试（时间） 




好了， 这一次我们巳经考虑周全了 & 应该一切就绪了。一定要确保键 
入卜 .一次测试之后完成的所有代码，并 Km 新加载豇面 s 哇，我们终 
丁看到连续的更新丫！ 


等—下……你和裁们看 
f ) 的星一样的鸣： ，: i 电 
tmi ® 事？达芍 
不衿。啮, t 不 t 我们 
孩酞饵太螭3? 賴3 
之前 6约获驭的磁苦？ 






U! P^m 

__gh*^jj. u ?nfiwfli 


I Mighty Gumbaii Sa(es 

LOS Mlo 2 

CORTLAND fi0 Fd 3 ^_ is 

mi^LAm^ da owmJ ^ 

^SNO spf tf S ㈣ bi ^ 

C 咖 TUWD 咖 3 9 y mt?afc 
mmNO sota s 糾 mbalFs 
，如灿 j g flUmhaN . 


如何删除重复的销 f 报 f 


如果再简单#荇 228 页卜■的糖果公司规范，你会右到清求 URL 中町以指定一 
个最近报告时间参数， 如下： 



/一™ 办 _q f 难 定-个 

还可以在的末屢缯加一个 hstrqiorfctLmA 参數_这 # P 含摴 f _) 这个 ㈣ 闳 C (荦6 4毫秒) 

后 el 报告 。 g w 礞下裉@徉任用： V 


这 很好， 但造我们怎么知道获取的最后一个报告的时间呢？再乘看看销售 
报吿的格式： 


[ rname、 T ，LOS ANGELES "/ 1 time 1, ：1309208126092/ , sal 6 s ' , :2), 
{' t name r , : 1, PASADENA ' T / , time ,1 ：130920 fll 2 e 219/ , sales "：8}, 
{■ T name”：’_DAVIS CREEK t , # , ' time t , ;1309214414505/" sales r , ：8} 

■ ■■] 


备个镝售报每驊充 
^ 踢咅㈣间。 


fiW 
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使用 Web 服务参数 





我知甩你为伙 么癸用 到迖个参雄 u 可吆 a 综 1 
最后一个狼 t 的蚴阏，然后在镦出 "F — 令锖求 
鰣使 用达个鰣的，使铒腯务 B 不会垣 © 我们 S 
经获取过的 报吉. 蛊这#吒？ 




每 e 酈承參 


完全正确。 

为了跟踪接收的最后的销售报告，我们需要对 upciatesales 函数 
做-些补充，对销您数据的处理都在这个函数中完成。不过，首 
先，我们要声明一个变量来保存最后报告时间： 

达个的间不糙士今&的以把送个变 f 声明凝在 

var lastBeportTime = 0; ㈣ _运抑叙 」鋪说 _ 丈_最前 

靂放在所有矗廬 


下面在 updateSales 中得到敁新销售报告的 时间: 


function updateSales (sales) { 

var salesOiv = document .getElernentByld ("sales}; 
for {var i = 0; i < sales,.length; i++) { 

var sal© = sales 【 i]f 

var div ― docmaQntdCreatcEleffientr’div”}； 1 
div.setAttribute ( ,T c 1 as3 “ r u s aleltem M ); 
div.innerHTML = sale.name 4 - ’* sold " + sale.sales 
T， gumballs"; 

aale^Dlv. appendChild(dxv); 

} 

if (sales.X«ngth > 0) { 

lastReportTlia? = ^&alea. leagth-1]. 

» 械 賴， H 

■看到 条务_«不1 #4 係綠裳有—个气&今 f f 
苦杖&數纯 中 ㈣ 后-个 A #。 糾 iif 肖祕 ㈣ 盘搞‘我们 ■^侧 二 I 进， 
它铍诠■定 f f 的代砝轼古与致—个苒常。 
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更新 JSON 來包宮 lartreporftimfr 

既然我但已经跟踪 J 最新报告的银售数据的时间，要把它作为 iSG _ 求的 
一部分发送给万能糖果公司„为做到这一点，需要编辑 handleRefresi^i 
数，增加 lastrepocttikrie 査询参数，如下： 



我们匆分 K 多个. 
^后笱吣爯邊茲 起東… … 


function handleEefresh f ) 厂 

vac url =s u http : //gumba^l.wickedlysmart. com 1 ' + 

'^" callback ^ mpdateSaleg 1 * - + 

+ iaatR^portTinie + …… t £ ^ Last ^ rttr ^ 

,r &random= ,T + (new Date( Yt* getTime (^ ^ 参教和会的斜 d 

var newScriptElement = document. createElement C. r script 11 }; 
new$criptE~Xein&nt. satJVttribute{" sr*c' url^; 
n ewScc nt.se t At tribute {" id", ” j sonp ,T ) :; 


var oldScriptEleinant ： = document. getEl«ment:EyIci{ M j sonp") i 
var head = document,getCldm^ntsByTagNanie f- n h«adTX [0 J; 
if (oldScriptElement: == null) - { 

head, appe ndChi ld< newSc riptEl eme nt)_; 


} 


VA 


else { 

head, replaceChxld (newScriptEleinent, oldScriptBlement); 





试一试 lastlCeportTime 


卜园就来实际试一试 last reporttime 査询参数，春看它能不能解决我们 
的電复销售报告问题， M 确保输入新代码，萆新加载页面，并点击刷新按 
钮。 -- 


ATWATER gumfe 驛 Hi 

FMNlWHiTOfl SDka i 叫爪加邶 

FARMIWCTOW irt?W 1 ffwmboltl 

QAfKQ^U GROV^ 3 


大.羽 t 

* 的味 t 艰告， _貧1 的 
裉告犛不処 h 


Mighty GumbaU Sales 


i?Q4cl J 沪 imMlIS 


扦 "” 一 ■一一 ^ 
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饽们越铪达令应 禺很不 错* 
现在不论我生在书康前通是在路途上.郗能 
完金路踪到 最新的 镝龟惰况。我开埯 冓的 认为 
达些 WebSffi 碥实有盎逢思 J s 着 . 我们 
用耱 粟杻、 JSON, S 省所布这些 HrML5 APt 居 
然能做钊达些 f 









与 Wet 交流 



^^BUILET POINTS --- 

_ 除了提供 HTML 和 JavaScript 的服务器 
外， XMLHttpRequest 不允许从其他不同 
服务器请求数据 & 这是一个浏览器安全策 
略，专门设计用来避免恶意的 JavaScript 访 
问你的 Web 页面和用户的 cookie 。 

■ 要访问 Web 服务托管的数据，除了 
XA / lLHttpRequest 外，另一种候选方法是 
JSONP , 

_ 如果 HTML 和 JavaScript 与数据在同一个机器 
上，就可以使用 XMLHttpRequesu 

»如果需要访问由远程服务器上一个 Web 服 
务托管的数据（假设这个 Web 服务支持 
JSONP ) ,则要使用 JSONF % Web 服务就是 
一个通过 HTTP 访问的 Web APU 

■ JSONP 是一种使用 <scr〖pt>& 素获取数据的 

方法。 

_ JSONP 就是 J50N 数据包装在 JavaScript 中， 
通常会包装在一个函数调用中。 

■ 将 JSON 数据包装在 JSONP 中的函数调用称 
为 w 回调” D 


■ 将回调函数指定为 JSONP 请求中的一个 URL 
查询参数$ 

■ JSONP 并不比使用 <script> 元素链接到 
JavaScript 库的做法更安全（或更不安 
全），只要链接到第三方 JavaScript 都要特 
别当心。 

■ 要指定 < script>5 素做出 JSONP 请求，可以 
把它直接增加到 HTMU 或者使用 JavaScript 
将<50^1>元素写至 DOM & 

■ 如果做出多次请求，可以在 JSONP 请求 URL 
的末尾使用一个随机数，使浏览器不会缓 
存这个响应。 

_ replaceChild 方法会用另一个元素替换 DOM 
中的一个元素 D 

• setlmerval 是一个定时器以指定的间隔调用 
一个函数。可以使用 settnterval 向服务器做 
出重复的 JSONP 请求来获取新数据 
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让大 鵃动_ 动，轉 :4 ;v 





H 丁加厶5填字游珙 






哇，不 得了， 这一章已经让你的应用与 Web 交流了！现在来让 
左脑活动活动，帮助你把这些内容都牢牢记住。 





横向 

2. 使用 X/VILHttpRequest 从服务器获取数据的模式有 
时称为__, 

_是万能糖果公司最新推出支持 Web 的糖果 

机， 

8. XMLHupftequest 取笑 JSONP 的_ 

K ). 高手教菜鸟函数参数也是 J ~ : 

■很_■，这一章我们讲了25页才发现浏 

览器安全策略。 

15. XMLHttpRequest 在 Microsoft 的一个緯号 。 

16, JSOMP 代表 "JSON with _” 


纵向 

1. JS0NP 使用一个__。 

3. JSOhJP 使用这种类型的对象„ 

4 . 我们原本以为能拯救世界的格式0 

6 - _有一个 JSONP Web 服务。 

7. 谊一 章中有这样—个东西 & 

9. 万能糖果公司在„ __测试(\^2200 11 

-_提醒 Frank、Jim 和 Joe: XMLHttpReqitest 

存在跨域安全问题 

13- 很容易在 : _上建立一个本地服务器。 

14 - _1质量保证检验员，看到向 GumbaU 生产 

服务器提交的请求失败了很郁闷。 
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来 t 第 7 f 的特殊满惠…" • 




令魯 ■ ■ e 办 

与 Web 交流 

苒盗 > 金挪 



0° 



0 


O 




TWCitSifllrt 
射德人, 


你现在的位置 ► 


279 










练习 



HTML 5 镇字游谀著寡 
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HTML 已经不再只是一个“标记”语言了。利用 HTML5 新增的画布元素，你已 
经具备亲手创建、管理和消灭像素的能力。这一章屮，我们将使用画布兀素 U ： 你啮， 
秀出你的艺术天份。别再说什么 HTMLR 有语义而没有表现力，#了画布，我们完 
全可以绘制出一个多彩的世界 d 现在就来谈谈表现。我们将处理如何在页面中放 
置_布，如何绘制文本和图片 ( 当然是使用 JavaScript) , 甚至还会 讨论如 何处理 
不支持画布元素的浏览器 ^ 另外，画 布不会 是昱花一现，在送本书的其他章中_ 

布述将腿露而 。 $辟 i 栽 ffK 戊5共客 vvdbg W 外这眘 

很多共同之 It ……后面还金付论这 个有轺 的内 
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■■ . 




新的劍让项 目 :TweefSbirt 

■ ■- ~ .' 1 • ., - ■ - - - .... - ■«■ ,■- _ : ■ ■ *■ Jr--. 1 


>» 




EI f 二:讀 f:. ' 

: ：^)k ai : 分±斌__魏值癀印在 : 


:二恤上 : 


f : : :.: :乂 ■ ^ 

_ •■… ■■■_. ■ - ■■ ■ ■_"■••■: ■■•• w _. ；■■；>_ 




竞 埤奉筆成为 cf: 撰接人 ; :® 赛把餅的太字印也羅。：二 ^ 

雀就織 T 二半: :都 i 知果本 讳顧谊 rH : ::: 二： . 

还有什么更好的地方？无论如何，这是我们的创业产品，就 
这么 办吧# ^ : 

目前，这个创业项目要上马只有一个 障碍： 我们迫切需要一 
个漂亮的 Web 应用，能够 U ： 顾客创建定制的 T 恤设计，显示 
他们最新发布的微博「。 

秸存$ " £ ^ p |_ ? 这个 t 金; M , 

r： J J 


2B2 


o 






0 Q 


° 0 




7V ； ftetsh〖rt 灿你 

4 "} 抱人。 
















秀出你的芝术 


: W. 


审蛮 “扣# 


经过详尽的迭代设计，另外在销 
售组的大置测试之后，我们得到了- 



的，来看罨哂， 戧们 ㈣ 鲥 釗处 . 
克眘巾紙 i 傲的设<七 


这 I 存 I £ 


一个初样（也称为前期形象设计) 






⑽ I ?:妗 这 


mp 




ii 基栽们的 t 物 
紐。 


用户界系应戌漳这样 


web 应 用粟尽 可軲薄途个页 砺丨掮 
句这说 . 钱们 4 望签芬 这个 ram 
竹，元锊用户糾用用户茬#交盎嬙 
进行仔钕 , 


供你审査，下面就来看一看: 


/^ Setect bac^rou^l odor: fv^fe[：l 


用户可 W 连挣背予达 , 
面线方炔，亡本赖迳 
和擻 fIL 


0>^or^are5? tastes ui 

Select t0ct cobr ： f 軸 f; 1 



CFtWfftT? 
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检查 r 


• ___ 

再来看看上一页的需求 5 你认为可以如何使用 HTML5 完成这个任务？还记得吗？其中 
一个需 求是： 确保你的网站尽可能适用更多的设备格式和大小^ 

选中以下所有可能的做法（然后圈出最佳答案）： 


只使用 Flash, 它在大多数浏览器上都适用。 


可以试试 HTMLi 看看有没有新技术可以提供帮助 （提 示：可能有一个 
称为画布的技术） D 


为每一种设备编写一个定制应用，这样一来就能知道具体会得到怎样的 
用户体验。 


在服务器端创建图像，再将一个定制的图像传回浏览器 


tliererctre no 

Dumb Questions 


^ * 说正经的，对于这个问题，为什么不用 Rash, 


或者一个定制应用呢? 


Flash 是一个很优秀的技木，你当然可以使用 
这个技术^不过，要知道现在整个疔止都在转向 
HTML 5, 我们写这本书期间、你要想在所有设备上 
运行你的 Flash 应用，可能会遇到麻烦， 甚立 包括一 
些非常流行的设备。 

如果你真的需要一种完全为设各定制的体验 5 实现定 
制应用可能是一个很好的选择。但是要记住，为各种 
设备分則开犮一个定制应用成本可能很昂贵。 


闷: 


我很喜欢在服务器端创建图像的想法^这样 
一来，我只用写一段代码，图像可以适用所有设备^ 
我懂一点 PHP ， 所以应该能搞定， 


这也是一种 Tit 的方法，不过这神方法有一痤 
缺点、如果 你有拫 多很多用户，就必须考虑栌展服务 
器来满足膨胀的用户需求（与此同时 T 每个用户的客 
户端要负责生成 T 恤的■見视图） a 但是，如果为浏 
览器编写代码，你还能得到更有交互性1更无缝的体 
验。 

怎幺做到？嗯，很高兴你这么问…… 


利用 HTML 5 ,你可以得到移动设备和桌面浏览矜的 
广泛支持，而且通常使用一种技术方案就可以创建普 
遍追用的应用 s 
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拜钫 TweetShirf 面队 . 

你已经了解了需求< 另外还为用户体验做了一个基本设计，现在来解决鼉_手的部 
分， 如何让应用运转起来„下面来听听目前的进展…… 


Joe : 看到背景上的圆之前，我还以为这很简单呢。 

Frank : 你是什么意思？这只不过是图像而已…… 

Judy : 绝不那么简单 & 创始人希望这些圖是随机的，所以我的 t 恤上的 

圆应该和你的不一样。间样的，不同 T 恤上的方块也应该不同。 

Frank :没问 M ， 以前我们做到过，只需要在服务器端生成图像就可以了^ 

Joe : 嗯，我知道，小过这种方法好像不 太好； 记得吧？这样得向 Aitiazon 
付大笔的服务器费用。 


秀出你的艺 



( fra ^ L 


Frank : 嗅，对 T 不过没关系。 


Joe ： 不论怎样，我们希 望问题 能立即解决，要知道，没有那么长时间返同 
到服务器了 D 所以如果可以 的话， 就在客户端完成吧。 

Judy : 伙计们，我认为邛以做到。我，直在研究 HTML 5 巾的画布。 

Frank : 画布？要汜住，我只是一个设计人员，快跟我说说。 

Judy : 你肯定听说过画布， Frank ， 这是 HTMLS 中的一个新元素,它能创建 
—个可绘制的区域来放置 2 D 形状、文本和位图图像。 

Frank : 听起来就像一个 < img > 标记 D 只需要放在页面匕指定一个宽度和 
高®，浏览器就会完成余下的工作。 

Judy : 这样比较也不错，我们确实要为阃布定义一个宽度和成度，不过在 
这里，画布上绘制的内容要用 JavaScript 代码指定， 

Joe : 那么，标记怎么处理呢？能在 JavaScript 屮告诉_布，“把这个<卜1>元 
素放在这里” ？ 


Judy : T 、行 ， 在沉曲中放人_布之后，你就不要再考虑标记在 JavaScript 
中我们会放罝点，线、路径、图像和文本。这是一个底层 API 。 

Joe : 哦，只要能画出那些随机的岡， 我就很高兴。 好吧 T 说得够多了，下 
面来具体看看吧！ 


你现在的位罝 
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向员浼增加 _ 个画布 

如何在 VVeb 克 面中增 加菡布 

Frank 说得对，从很多方面讲 T 画布就像是一 f<img> 元索。可 
以这样增加一个画布 5 



&A1/U/HS ( 要 布）走着基一个 
丘常的 HTML 走寿 . 节先展 - 
个 # 4S < ca w,vfts > ^ tB d 


Wdth ##走义达存 mt ) 资® 
中木乎方夤 i - 4多少个薄砉 


/ 


炎似的 h Weight 左义3它辦6的页 



<canvas id= M Xoo]cwhatIdrew M width="600 TT height= ,, 200 lt X/canvas> 

V / i 


敖们坩如: J — 个 id 来耔 ad 个 

函:赖后含遘到如何值用这 
个 U …… 


H widths E ^6 
^ oo (^ $ 宽。 


基鍤來杉记, 


浏览器会根据指定的宽度和髙度在页面中为幽布分配一些空间。 

在 m t / n 6^ oo r 
其度 ^00, 


这基®冻的； Si#。 我 
们值用 ti 个点来度 f 亟 


L»k Wlull D»« 


， a 

i - I ■ i+hnp ： 11 tocjJtouf-fcih/HTMLS ^wfiC5tiui;innii! "(1 





UiWA ^ oo ), 









丞布坏经 HTMi ^ 
® 布鸟 S 姑才縈 4 沒苟不 11 
同 (比如阌薄等） （ . 


....^ 
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试一试你的新©布 

现在在你自己的 Web 页而 中试试 & 把下面的代码键入到-个新文 
件，然后在你的浏览器中加载这个文件： 

<1doctype htnil> 

<html lang^ T, en"> 

<head> 

<title>Look What I Drew</title> 

<meta charset="utf-8 t, > 

</head> 

<body> 


檢入 a 个代砝试 
一试 a 


秀出你的 




任麒承參 


<canvas id= ,r lookwhatIdrew" width= 1p 6aO ,T height- " 2 00 ,r ></canvas> 


</body> 


</html> 



m 齡 & 





■… ”仿- 巧能也金寿约 
罔样的结果 f 





戧们產3这电续来裤釋凾 

布 4 S [a 

P ^6 3 

i 冉沒宵这巷钱（餘邦伐 
t S 函法） D 

X ； 

耢刊下一贞 5 麟更多 


_ 
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为齡增加 css 

如何看到©布 

除非你在画布卜_绘制了內容,否则你是看不到它的。画布只是浏览器窗口中的一个 
空间，你可以在其中完成绘制。稍后我们就会在画布中绘制具体内容了，不过现在 
我们只想找到一个证据，证明画布在我们的页面中确实存在9 



还有一种办法可以看到_布……如果使用 CSSS< C anv aS >S 素指定样式，就能看 
到边框，这样我们就能在页面上看到画布了，下面就来增加一个简单的样式，为画 
布增加一个1像桌宽的黑色边框。 

<!doctyp© html> 

<html lang- M en T, > 

<head> 


<title>Look Hhat 1 Drew</title> 
<meta. charae t= M ut f^ 0 f ' > 


<style> 
c«n.v-as { 

border: Ipx »olid black; 

} 

</ctyl«> 

</head> 


戰们; 6 函布坩加？—个_式> 
它 在&碜 I ：缯加 : J - 个1体素 
宽的黑意連楛，这样我们弒 


<body> 

<canvas id= n loolcwhatIdreif T, width= ,T 600" height= T, 200 T, ></canvas > 


</body> 



r 

孟布了 D 摟下来，需属的它 
姐些有金 S 的公《..… • 
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T^- - . 


秀出你的艺术夫 


tAere|are r \9 

Dtinib Questions 

雷 - ■- . ^ - * - - 

闷 I 


>1 


「是不是 二个页 _只袖有一个画布^ 


* .■_，_•■ - - -• • _ ■ -■■ t _, ,r- ■ 

■■- > j- ■. . 




t * 羊，你 希望有 f . 之个都:可以(或者只务不¥ 出岣 ^ ^ 

或； f 你的两户的处理作々) .. f 位是4为每个無布'指 定等 


我可以使用 css 设置画布的宽 度和商 度吗? Ut < 
是利用元素的 wkltl ! 种 leight 属性 r 



这 表乎以的，: 不过它媧4善■可能' 与板想象中稍有 ： . 


—十唯一的沾,这样就能将它 ftt 作为单独蛛画+ 

绘棘^稍^ "体 就会责乳如 何使胖务布 W . '： : V ..:」 


出 X a 默认的,無布走索是扣6像索宽/1=5啤幸高二如 
果表在 canv 自 s 辞 j 匕电指 ^ iwidth^Ueight ▲性，:就"会得到 
iT +关小畛承布1::如襄接下来奉 qs 含中指定了 一个大小， 
比 iV 600 px . >c 200 px ; 那 么原来 ^30 O Vl 5 t > 的^寺‘会扣 1 
4 冬刦这本夭小' 上所以.函布.中 -绘所肴 西-套也会■随 . i 扩 
: 二 a ^情瑪这系芊是进明以在良.:展。.遠;軋像为广个禺像推定新吟完束 和高度时 〆 如孓心 


画布是透明的吗_? 


:砷 

赛 

■布 .中进行绘.制，—填4有獻色 : 称像素，:_这 章启 南 会介绍 

■ s _ ■■ ■:■•*■ ■■:■•■ . • ■ 乂. ■' ■-• r， -： •■ ： Jm . ■■ ，- * . ■ ' ■ _ ■ _ 

'如 何依 对：：> ^ .： =-彳: :: 心，…: 

.■ ■ ■ ■ ■ ■_ ■- . __ ■ ■ — ^ ■■ _. ._■. 

画布嚴进明的，逯 i 不是份；我可&把它放 
在另一个元*的 -上面 ，比如在一十囹谣或页面上 另外窠 
个元素的上面进行绘制了是这样吗？ 

非常正确！这正是©布的一个诱人之处。利用© 
布，你能够在页面上的任何位置增加困片 5 


參早界，实坪.寬卑和高度 f 大4更小 咣,」 就命将困像：!^ 

:命或确 fv 如 果将它放大 r 鈦会在图诹中得料像索化的 

■.妓 f 奸不对对 X .、:二〜^ 

凾矿也是广样， 30 Qpx 宽的禹布变成办 tK > p ? t 宽时 . :砰样数 
I 的像素会扩展办原来大小的两倍 t 所以 T 看起来会变:得 
矮缺胖胖。 不过，石果使用元素的 w 〖 dth _ 和 height 爲■性 ¥ 
会把凾布的大小设置得比 300 X 150更大 （或 更小），但 
画布上的所有内容仍会正常绘制。所以我们建议还是在 
标记属性中指定寬度和高度 t 而不要在 CSS 中设置这些 
属姓，除非你本来就打算缩教函布， 



_嫌觚 ㈣ 


你可能已经注意到，画布元素中没有任钶内容。如果在开始和结束标记之 
间放 S 文本，你认为页面加载时浏览器会怎么做？ 




</canvas> 


你现在的位笾， 
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在画布绘图 




^ 1 - 


在惑布上绘樹 


刚才我们得到了一个空画布 T 这让我们不免大吃一惊。与其呆坐 
着不知所措，对编写 javaScHpi 毫无想法，我们不如在画布上蚵 
上一个漂亮的黑色填充矩形。要画这个矩形， t 先要确定画在哪 
里，另外矩形有多大。能不能放在 x = lD 像素、 y =10 像素的位置 
上，另外让它的高度和宽度都等干100像素？来试试看吧。 



现在来看完成这个工作的 代码: 









< 1 doctype htrol> 

<html lang="en"> 

<h^ad> 

<title>Loolc Hhat X Drew</ title> 

<meta charset= r, utf- 8 T, /> 

< 3 tyle> 

canvas { border: lpx solid black; 

</gtyle> 宠全加栽“科你 铊約。 料我 

^ f ) 萊 M 34 的一个 

<seiipt> 制。 （ iffj 用 

window.onload =function Q i gcteUki^^tByMJLC 

var canvaa = document , gQtBXoinentByld ( lf tshirtCanvas ,T ); 这的引用 


0 前保铝 CsS ^ S 这楛。 


雨面加教匕后孖 诒谂奶 


var context = canvas.gatContext( iT 2d n ); 


context , fiXIRoct (10, lQ f 100, 100> 


噁-达有点 is , 签然我们電 M 奂韦的_个 
t 下 i 来 A 体进行婊 W 。 





哉们僅用; idir 下 t 存函41：铪糾 
充的矩形。 


个成 


系外还晷 奄窻度 和爲度（辈仡碌 
緣 *) 。 

s 有一点垠 节舂罢，薄 衫的媾充方法居挥沒有瑀光 ft ■.…- a 
个内審柺后爲勉濞鉍茂明 . a 


h - 

</script> 

</head> 

<body> 

<camr 在 3 width= , 1 600 M helght- M 200 T, id^' 1 1 shirtCanvas 1 p ></canvas> 
</body> 

\ 

呤.不戧忘？戠们的產 4 无量。我们相 — 个公00簿套 
畫 . 200依素真的盎.布， id ^ ^tshirtoatAvas'' „ 


</htmi> 
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个小小的垂布测试 


ft 




输人这个代码（或者从 http :// wickedlysmart . com / hfhtml 5 找到 
这个代码），把它加载到你的浏览假设你在使用一个现代浏览器， 
应该能看到类似 F 而的结果： 


秀出你的 ★ 


% 






ii €我们妗\絕的，话吁函4的 
± o t ±oii I , 


Look WhdM Drew 






诤细分析代码 

这是一个不错的小测试，不过下而我们将更深人地分析这个 代码： 

❼我们的标记中使用 < canvas > fei 2 定义了一个画布.井指定了一个 icL 要在这个画布 
上进行绘制， t 先需要从 DOM 得到这个画布对象的一个句柄。与以往一样，我们用 
getElementByld 方法来 得到； 

var canvas = document. getElementByld { f, tshirtCanvas M > ; 
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回顾画布代码如何工作 





我们已经将画布元素的引用®给了 canvas 变量， 在画布上具体绘制之前，现在必须 
达成一个“协议 " Q 我们要谓求画布提供一个可供绘制的上下文 ( context ) ,在这里， 
我们明确指出需要一个 2 D 上下文。将画布返 N 的上下文赋给 eontext 变量： 


var context = canvas. getContext { 11 2d 1T ); 

4 战杏奂铨制之 s . 达甚叛们必■闲 a 



现在，有 f 上下文，叶以用它在画布上进行绘制了，具体的绘制通过调用 fillRect 方 
法来完成。这个方法会创建一个矩形，以 X ， y 位置 ( 1 CU 0 ) 为起点，宽度和高度都为 100 
像素。 


戏们下±1:调用去，高 
不 &U 也 4本夯溪用 ii 个方法 u v 


context , fillRact(10 f 10, 100, 100) ; 

'诸试这个代砝.汸金卷 fj 出瑰一个 
第全 袒形。 试赛拉 3>. y , width fa 
hdght 的体, 令寿含邕生 < j 么。 


^ , V __ 

•，办 ★萑 IT 

如果你的浏览器支持画布，你能想办法使用画布元素吗？如 
果浏览器不支持，能不能显示一个消息？比如 " Heyyou.yes 
YOU , upgrade your browser !! ^ (嗯 ，你，对， 就是你，快点升 
级浏览器 !! ） a 
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tlieretare no - 

D 刺 Questions 

画布怎么知道这个矩形是黑色的？ 

黑色是涵％的默认填充颜色。当然' 
你可以使 mmStyk 爲性改变默认填充色 t 稍 
后我们会介绍 c 

如果我只想要一个矩形轮廓，不想要一 
个填充的矩形 . 该怎么做呢 1 

如果只想得对一个矩咿时轮 4— 就要 
使取 trokeRect 函數4不是 fdlRect 。 本章后面 
你还会看到史多矿关笔划 Cstrokey 的内容。 

^ 什么是 2d 上下文，为什么不能直接在 
画布上绘制？ 

答： a 布是 Webifr 中显示的图形区.上 
下 文是与岛布关联的"一个时:象 。 它定义了 一 
组属性和方法.可 VI 麻来•在 a 布上进行绘布 k 
甚至可以保存上下文的状态，以后再恢复， 
有咔这会很方便 a 这一章后面你还会看到很 
多上下史尾性和方法 n 

画布设计用^支持多个板口、除了 2 d , 还有 
3痕以及我11还没有想對的其他 接口， 通过 
使用上下文，就能在同一个凾布元素中处理" 
不同的接不能直接在画布上绘制，睬为 
你需要选择一 个上下 文来指定使胂哪个接 

问； 

文？ 


这是不是意味吾还有…个 “3d ： 上下 


答:还:浞有。这方面齐很多忘竞争汴的新^ 
兴标准，不过9前还没有哪个标准胜出。瞥 
且考忠 2 d 上下文，同昧可以看看 WebGL 和使 
用这 - 个接 13 ■的库，比如 Spide.tGL、SceneJS 和 
three 



秀出你的 t 

苗 > 


A 

k 難 
% 


m 


任顧承 f 




是$是想知道如何在代码中检测你的浏览器是否支 
持 SJ 布? ■ 

你「当然能做至先需要指出，到目前为止，我仰一直 
假设浏览器是支持画布的。不过，在生产代码中 
确•实应该进&测试，以确保浏览器支持画布。 

你要做的就是查看 Canvas 对象 5 * (这个对象由 
getEtementByld 返 g])_ 中是否存在 getContext 方法： 


芒充 ㈣ 迈 ® 中 - 个 亙年欢 舞_用 


vax canvas - 

document.getEleroentByldrtshirtCAnvas^) 
if (canvas,getContextJ { 

// you have canvas - 

} eise { 

"sorry no canvas API support 



然后 .梭全 0etc ^ t ^ u^t 太:名 I 否存务。 H 戟 ID 1 
4 沒肩.:谈麻 f 个 H P .! 奄蜷它&玄貧免。 


如果聲想检查是否 提供画 布支持， 而无需 标记:中已有 
一个画 布，- 可以使用称已经了解的所有技术动态地创 
建一个画布元素 & 如下所示: 

var canvas = 

doctiinent.createElement canvas w ); 

可以'参考附录，来了解一个开源库的有关信息 ，你可 
以使用这个开源库采用一种一致的方式检查 H^MLS^ 
的版有功能； — 
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画布和 IE 浏览器 




色 i 


為 




孜顳 


承參 


挪 

■赛 
♦ 



我在 Internet Explorer 中嚳试 , 

在尿丰法出现瘙布元素 的蚶方 计么邾 
进布 # 到，怎么面攀 7 


只有旧 9 及以后版本才支持画布，所以要适当地编写页 
面代码，让你的用户了解这一点《 

你看这样好不好：如果你实在需要在 Internet Explorer (再 
说-遍 ， IE 9以前的版本）中支持画布功能，那么请奄看 
Explorer Canvas Project 和其他类似的项目，通过这些方法 
可以使用一个插件来实现这个功能。 

不过，对于现在，我们假设你更愿意让你的用户知道他们 
遗漏了你的绝妙的画布内容。下面就来看看如何做到…… 


可飪伪含建汉姑们科组刊 f 巧! 
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裘晷 M 失敗 

所以，现在的市实是，总有某个地方、在某个时间，用户可能会访问你的网站, 
但是没有提供画布元素支持 □ 你是不是想向他们发送一个友好的消息，告诉他 
们应该升级？可以这样做： 

r 这鱿 I 手 t 妫丞布 无嚎。 

if . 

<canvas id=" awesome content ’’》 


秀出你的节 


术美份 




Hey you, 
</canvas> 


yes YOU, uparade your browser?! 

\ 如黍用户的到览 B 不支祷盎布,句以 
在 iif 旋入4璧$孑洽蝕们 的# 忘。 


这是怎么做的？嗯，只要浏览器看到一个它不认 t 只的元素，默认行为就是显示 
其中包含的文本。所以，不支持画布的浏览器看到索时，它们就 


会兄示 “Hey y < xi，yes YOU T upgrade your browser !!” 。而另一方面，支持[_布 


的浏览器会直接忽略画布标记之间的所有文本，所以不会显示这个文本。 





御御你们，开嚴 
HTT^L^ 梓: H 的人们 . 
感谢後们 {£■ H — 切如 
dhtSi 


另外，你已经知道，对干不支持画布的浏览器，还有一种处理方法是使用 
JavaScript 来检测浏览器是否认识这个元尜 D 这样可以提供更大的灵活性，能够 
在用户的浏览器不支持画布时为他们提供不同的体验^例如，可以将他们重定 
向到一个不间的页而或老转而显示一个图像 P 
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回顾实现计划 



Frank; 当然，另外我们逐需要一个用户界而，让用户來 
指定这些选择。我的崴思是，虽然我们已经有了 "模 
型 71 ，不过还需要具体 实现^ 

Judy: 你说 得对， Frank , 如果没有界面，再继续深人也没 
有太大的意义。 

Joe： 那不就是 HTML 吗？ 

Frank: 是的，我想是这样不过，假设这些都在客户端 
完成，又该怎么做呢？例如，表筚在哪里提交？我实在不 
淸楚这些如何集成在一起 

Joe： Prank , 我们可以在用户点击预览按钮时调 ffl— 个 
JavaScript 函数，然后就能在 Lli 布中显示 T 恤的设计了 



Frank: 有道理，不过如果所有值都在客户端，我们怎么 
在表单中访问这些值呢？ 


Judy： 就像访问 DOM 的方法一样 I 可以使用 document . 
getElementByld 来获取表单值 D 你以前送样做过。 

Frank : 我就不记得了。 


Joe; 没关系，我们来一起一步一步回顾一 F。t 先从顶 
层的全局视图开始。 
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TweetShirt ; 全爲视 底） 

开始庞大的实现工作之前，下面先后退一步，来看看这个任务的全局视 
图^我们要利用一个画布元素构建这个 Web 应用，同时有一些表单元素 
作为用户界面，在后台我们要利用 JavaScript 和画布 APT 完成具体工作 D 

应该像下面这样； 


秀出你的夂米 




认表輩 ^ f _) 用户 餘入. 以及 朽用 
丞名 APf 笫成礆料。 



领 g ( plrtvUw ) 接 Bi 寄用 
逢的领 


个满_的表嚤& 





S 4 r # 议錡的 
品布 D 


_ 1:1 

Grd^or^re^? jcrc^i |：| 


^ 栽们余值 

綾射 rife 的*冻 ® 挎。 


Pfckat^eet: f 「: I 

々（S> 料㈣ 

基 象荦无 






fi # ㈣ 侈我们 t 龙一 墊柬务器瑞炙特来实 硯 1 " 梅的电+庙 
务 1 zii r ° s . 我们不姹蚵么郯帮伪完威，得碎你的纪公 
珀0铥咎 irtf 不罌忘记淦我们省— 畔秃费 扣菜 
袖蓮# 琢始肢 拔更錡3。 
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粉演浏览器 



TW 你會奢到丁饵磬 Wft 暴单，你的任旁* 

裒矛铯个 iw 。 隽谀工作疳， 
把你的 脣栖 赵上―页舴 I ® 你个比衫^聿奢 
饪够得对>対 . 




场 i ■〜 


令 





w, 

m 4 

七 身 

〜齟承參 


<foxm> 

<P> 

< label for= M b ac kgrou ndColor T， >S e le c t background color:</la.bel> 
<select id- M backgroundColor M > 

<option value= rT, whi.te M selected= ,, aelected, r, >White</option> 
<option va lue= Tl bl ac k TI >B 1 ac k</option> 

<ys©lect> 

</p> 

<P> 

<Xabel for= T, sbape T, >Circles or s quare & ?</l abe 1 > 

<gel«ct id= M ©hape M > 

<option values^none" se 1 ected= p "seleeted !f >Meither</option> 
<option v^lue="circle3 n >Circles</opt ±on> 

<option value= 1 f squa re s f, >Squares</option > 

</select> 

</p> 

<P> 

<label for= f, foregroundColor M >Select ： text color</label> 

<select id= M foregroundColor ' f > 

Coption value="blade 1 ' selected =>, selected">Black</option> 
<option value=" «rhi te” >Wh ite</option> 

</select> 

<fp> 

<P> 

<label for= T, tveets ,, >Pick a tweet:</label> 
oelect id^ T, tweets"> 

</select> 

</p> 

<P> 

<input ： type= 1 T button M id= f, previewButhon' f value= N Pr©view u > 

</p> 

</±ot:tt> 
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把俅的界®罢矛存 q 
t web^ c£j* . 表军无豢 : i.3 
iii. 3 ^ 


秀出你的 






舣设汸 a 用这个界®# 
你的 T 恼 Si (£。 



再来粉演浏览器 

琪热&较有3脣面 # 轨拧适疰 
JavaScript 保呛，#宭出务个脣 
宙尤紫 的值。对照木章承疳拎出 
聆辛案粒*你你得对 
>对。 


var selectObj = docTiment. getElementByld ("backgroundCcslor"); 
var index = selectObj. selectedlndex; 
var bgColor = selectObj {index} ^value; 



var selectObj = document, getElementByld ( 11 shape"); 
var index = ^eiect:Obj, selectedlndex; 
vax shape = selectObj [index] .value; 


var selectObj - document. g©tElem&ntById( f, foregroundColor ,f ); 
var index » selectObj. ^electedlndex; 
var fgColor = selectObj [ifidex] .value; 
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创建 Vrnl 


f 先，建 iHTML 


说得够多了！下面来具体构违这个应用。做其他工作之前，我们只需 
要一个简单的 HTML 页而。更新你的 index.html 文件，如下所示： 

一个符合 HTTMU 5 的不 
梓的,太 缚？！ 


為 
镞 






M 



任顳 




(i 意， 我们把枒餞改 
^ TWfiCfcShLft'' e 


<! Retype html> 

<html lang="en’’> 

<head> 

<titleyTwaetShirt</title> 

<met& dharset= M utf-0 T ' /> 

<style> 

canvas {border ： Ipx solid black;) 

</gtyle> 

<script 9 rca"twa61fthi£t ,js ,1 X/*cript> 

</head> 

<body> 

<h l>Twe«tShi rt</hl> 

<canvaa widtb= T ， 600 s, height^ J, 200 M id= , 'tah±rtC*nva« T, > 

<p>Pl 0 as* upgrade your browser to use Tw«« tShi rt! </p> 
</c*nvas> 


二 




这 fI 奂布！ 


<£oriii> 


\ 


</£orm> 

</bodty> 

</html> 


( HA #. 电當 twect ^ Ut 应用的蝌笮控 
_ a T —否典句褅表荦…… 


我们为值用老別 
的用 卢摄俱 个 



•崔____—— 

如果要把画布上的 CSS 边框换成用 JavaScript 在画布上绘制的边框 v 你还需要 
了解哪些知识？另外，如果戒答得出，说说看你更喜欢哪一种方法 （ CSS 还是 
JavaScript ) f 为什么? 
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秀出你的 ^ 


规在采增加 < forw > 



OK ， 现在来增加用户界这样就可以开始编写一些代码来创建 T 恤。 你以前 d 经 
见过这+代码， 不远我 钔增加 k 些注解，让代码更淸楚■•些，输人代码时 ，一定 

I LE I ~ J I I ILJ .r t | lj/r | 1 Ankr ^ - ■ — ■ — ■■ ■ — — 

11 ■ J || I ~ff TL ' li ^ p ' j ^-, _ - ■ ~" ~ ■ ~~ *• —~- g ~ ~ j 二二 -_ i _ ~__ _ j ■ - ~-i _ _ ~ _ _~ __ ~_~ :- ：- - - —— - =. - 






in 




蚵 4 这 # 代辟麵叆存轮一费建-的 

<form> 

.<p> : 

- ： ： -' .： _ -■•.-■■% -, ■- . • ■ - . - ? - - >, _v _-■■■■ - s .* -_‘ t . r - ' .■ - - :- v _ : -'-• " ------ ■_ - -‘ 二 :，一 - ■•: 

<label for= T, backgroundColor>S«lect background color:</iabe 1> 
v- id= T, l^^g^ounde<>lorr> ' 二 - : : 二 ; '..■ : . ' . - . ■ ：. v - \ . ^ -i. :, ^ ^ - ^: j. ■■■： 

. <optibn Vaii]ta= !, whit®" solectfic^^aft-lectftd^MWilteK/optioc^ 

■ ； : .-V-Option ^ala6- ， T bIa<A'^l«^/qptTOn> U、‘ 7 、 ' 二二二二二二二 ': > 乂 

一 …. ::一 ： : ： vq:,: 户 ㈤ 逸娜緣化设竹的 r 

: 紙二 ：: . ::: ； U ；:,： :： ；.:；..： ： . ... 

. <1^ - \； :;:;： . ； V，^：： v .；- " ；： 

；^.；,<« eletet r 二 W ;::.Vr ' ，:') :卜 4 .:工::; : 二:穴:::' 

.■ _■ ■ • .. ■- ■■*— ■ ■>_■■_ ■ _ ■ - _ _ -1 ■= - - - S ■■ 二 1 . - 、 ■ •__：■ 

: ■■广 ■ —• ■ . - - . -■ ■■■:、•". •■■_■■■■ _ ■ ... . ■， - __ ■--、_■■■■: -A ,■■■_， ■ ■■ ,._■•■:•■•■, ■ ■ . - a . -1 _ . ■ _ - _ . . j ■ • ^ - •■■■ • _ • _■ • • 

L <optlqn S6lect ; ed^^aaleclp«ii n >N«X'theK</6pfei.6n> ….':二 

- ^ptiofV-val^e^squarfia^Squares^optio^ .-= … 一 绣/乘 右喊宏柯十 m ^ 

rX/Pt ] 


、 - V: 


■:- r- ■ — - " • . - — 1. ,-n . - —i tit- 

':V.f.. : -- 


<p> 


■■*- - 

.•- '― ■ — J" 

- -1 — . 


-.-.lir 


：-■ ^ . 


<rabal. f or= M f or©groundColor r >Select; teatt color :</label> -^~T 

£d^£or^grottiidC^Jtorr> 二 u，-f - 二 . 二 丄、一 . 一 

. - ，产. _ _：• . ■ 产 一 一■- -" : - *： c ;-^ . . 一士 — ■ - T ' 4 - - ' -._ Tl _ •二 一 .■- . 一 二 -：^= r r 一. •-^_ -■ - j _ ' ，-■■：• ^ T ^- •_ ■ - . . 一 ■- - - ^ - 


—*r 


<option valuer"white">White</optio'n> 

.. 二二 -- 7 ^ 7 — n'’..... --CS 去， 

-一 -■ 、 一 一 ■■■■ ■• = :~ ■ ■ - ■ - . ■ - —*_■ - ■ ■__.■〆 — -..— L — «_ ■ • : 

</p> _ 

: • : 心 1 二 : 二： ; 4^= 二 … -■ —~ 

^<jp> ， :: r* vj : ==-7^T3^.t^c. 

- v < label for^-'twee^s^Piclt «i tw© eZ : </ label > 


乂 ■: 




賴麵;皂齡， 






_ — 二 ■■ ■ 


<seleqt. id= M twe©ts^'> 

</seleet> 


</p> 

<P> 



绝，放郅么巧 付么达 4 f 的唤？呤卜后 f 我们 
含#知戊驴 (M 佘: 我们乘靂认 ndtu ， f _} t 防的撖博 
华堯 H ： &一个 Mtr 左深 r . \ ) , 


< input type= rr but:ton" id= f, previawBu'tton^ value— 1 p Preview ,+ > 


</p> 

</form> 


如某俅軚惠表輩.可翁贪 fit 刊」这 t 表# I 然沒 ft 
(M 说穿 n 魚 忐招钴 的它廿彡也不金嗷） £ 
財后我 n 舦含公理这个碎®…… 


\各运 a 裱贤丁惟的— 个接钲 I 
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增加 」 uaScnpl 


用 JavaScript 傲些计 f 




% 1. 


e o 



银 



•务瑯 

标I己很不错，不过要由 JavaScript 来完成这个 TweetShin Web 应用的构建 Q 我们要在 tweetshi- 
3：1：0 3屮增加一些代码。现在，我们先做一个小小的工作，只是在 T 恤上放入随机的方块 a 不 
过，即使是做这个简单的工作，旨先还需要启用预览按钮，这样当你点击这个按钮时它就会调 
用一个 JavaScript 函数 。 

刻速一个 

4缯加以 T 代场 。 ) 考光格 J 奸光考 。 

window .onload =function(> { 

var button — doc iment-. ge'tEleine nt:ByZd ( ri previ ewBut'to n lf ); 
butt on. one lick ^ previe wHandler; 







所以，现在点击预览按钮时，就会调用 P 【 evie W Handler 函数 * 我们"『以借此机会更 
新 画布， 来显示用户设计的 Ttfih 下面先来编写 previewHandler: 

荖先琿利函崦无棄，气龙求 
^ 饵的 它的 d 飨 ㈣ 土 T 生。 

function pr^viewMandler 

var canvas — document .ge'tElemfin^Byld ( IT tshirtCanvas 11 }; 

var context - canvas >getCoirtext (” 2d ”】； 段 p 韋襄 I f 界电中选蜂 3 鄉个形坎 * 

的认 

var select^Obj = documerrt.getEle 珀 &ntById{ Tl sh 在 pe") / 

var index - selectOb j ^electedlndex; 然后奢找选待 了碑个 ( 方块这嚴围） 

蛞此卩选无棄的黃 $ , 吞把它的値瞰 



<r 


var shape = selectObj [index] .value; 

if (shape == ''aquares^) { 

for ^var squares = 0; squares < 20; squares++) { 

d 这 wSquare 忙帥 v as , context); ，叫⑽取'枕 f 


) 


麗暴一發 方決 a 您之 0 个 怎 4 轉 


} 
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闽 ：㈣ _ 


iiiemifTre 

Dumb Quesgons 


秀出你的 7 术龙扮 

k 令 





i ectedlnd ex 是如何工作的？ 

答 • 选择表4控件的 selectetUndex 属性会返回你 
在 T 拉菜单中踔选选项的编每个选■项列表都会 
转抉琀一个数纽:.各_个•选喟么按顺-序放&这个軚 
n 所以，假设你有一个选柽列表， & T 紐以下选 
项；- lL p > zza w , “ tfouglmut ” "granola bar ” 卜如 


lecrtedtn 



果你选择了 ^ d"o u gh n u t s select ed ■ nd e x 就是 
1 (要 记往 ， J a v a S c r i p t It 组索引从 0 开始）「 
洗在你可能不只■是希望得 到索 郃，还想得到这个索^■相应 
的选•项值（在这里就是 doughnut 1 ' ) ,要得 if 这令选项 
值 1 普先要使用索引得对教组中的元素,这会返回一个选 
f 对象，得到这个+象的值时可:以使用 ViiAie 属 jJt ^这会 
返回选项 va 〖 ue 属性中的串 





馊代格磁赌 

利用■你的伪代码能九组织下面的■伪代码^我们需要为 dfawSquare 函数编写伪钹码，这个 函—数 取一个 t 
布和 -一个 上下文参数，会在 画布上 绘制一个大小随机的方块。学另后面的内容之龍，谪对照检查本章 
最后给出的 答案， 


function ^xawSqu a re { 


I 我们 6 餞帮伢填入 Ui 个磁钻 ^ 

r 1 上下文 I H 





} 


^0htbLuA H 差 a 好勃祥中方块 
的轴丞。 


i- 


在位置 x，y 画一个宽度为 w 的方块 


为画布中的方块计算— 个随机的 y 位 



力方 块计 算一个随机的宽度 


你现在的位黄 ► 
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实现方缺 


編茸 drawSquare 备数 




备 _ ■咬夕 


既然已经完成了最艰巨的任务，明确了伪代码，下面就利用我们现有 
的知 识来编 写这个 drawSquare 函数 ： 


参數： ® 车和 公下.艾 。I 

function drawSquare (canvas # context) 

■■"^var w = Mat:h*floor(Math.random 0 40 J; 




令任齟承令 





为方缺的 f ^KMii I ! t ) si SI 
机教 H 后 ® 含1 挺產多保明 •".*. 


(if f I 是方 
麟舍一个租 
机的宽度 -w 
双想机的 X 和 g 

< ai c 


var 


var 


x = Math»floor (Math. randomQ * canvas, wid t h); 
y = Math. floor (Math, random () * c*nvas,h©ight>/ 


栽们选樣斗沁方缺的最走 （■)、 

A 矜 g 全耔棵猙患布的宽度 
和 集皂碥 t 。 我们分到 
和 y 逸绎 5 -个介子 0 利宽 
&和蹇 / iz 间的瓿机數。 


context.fillStyl© = ， T lightblue ,t ; 
context. fillR*ctCX/ Y ， w, w); 


方块 a 



僅用 flLLstgLe 方枯; 6 方璉指金—种(靠失的沒 
备兔 。柏后舍曼珥鉍地介绍注个方■:去…… 

.二 5 T 二 


如何确定各个 Math.random 值乘以哪个数来得到方块的宽 
度 1 U 及位置呢？对〒矩形的宽度，我们选择了40,这是 4 r 
因为相对于画布大小这个尺寸 很小。 由干这是方块，所以 
卨度也使用相同的值。另外，我们选择画布的宽度和高度 
作为选择 x 和 y 値的基础*这样就能保证方块总会落在_布 

的界腿 内。 峨统 


宠你 t ? 3 妗代坞中 
馮定其他伎 ( a ? T - 44 o ) I 


方钠在1：脅的人 y 老杉 





方玦的 宽 A 和杰度 
( jlisfi , 方块的宽 
度和惠 相阄） ® 


> 


备布的 集良 , 
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秀 


出你的术天吩 


试—试〖 

好了，输人所有这些代码之后，现在来运行。在你的 
浏览器中打开 TWeetShirt index.html 文件。按下损 
览按钮，你会看到随机的蓝色方块„ 

这是我们看到的结果： 



不箝. Cd £ E 4 戠 D 想 

f f*J W r 



Cipclev or ^uwc*7 Squ^. vs Tl 
Stlcci tent color ： m§ck TJ 
Pick ji tw 挪 ..^ 

»■ - -— w »— 



O 



他说得的, 我们递到 -_ 
一个沙 问蛀:，釦果 M 
殉览甚纽甚 下多 ； t 
軚含着«这_的结果。 
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修正方块代码， - 」二 . 二 T. V 、 

为什么预览时会筒时齑封老方蛾和新 
方蛾？ 

这种效果确实很酷……不过这不是我们想要的。我们希错每 
次按 K 预览按钮时，新方坱会替换原来的老方块（同样的， 
我们也希望发表微博时，新微 W 能取代原来的老微博>。 

这里的关键是，要记住我们是在画布上绘制像素。按下预览 
按钮时，你会得到 L 破布 r 并在上面绘制方块。_布上已有的 
内容当然会随新像素一同绘先0 

不过，不用 担心。 要修止这个问题，实陡上你已经了解所需 
要的全部知识。我们可 以这樹 故： 


令、 





% 



[."ircki cr ；»*«.” 

Srkd fieiti troUir 

Pads 纛 mca: 一?） 


■ P * P^dhw 




①从 ^backgroundCoIor" 选錄对象得 # 箝选的背 I 顏色。 
(D 每次孖始铨制方蛾怎前，使 ffillKtylS 和 ffllRecf 填 


^^trpenyour pen 

—%, 


为了确保 每次: 点击预览按钮时在画布上 兴看 到新的方块 * 需要使用 
用户毛 “backgroundCoiof” 选择菜单■中选择的背景色来填充画右 
的背景。首先，实现一个函数用这个颜色填充画布 □ 请-在下面填空， 
完成这个代码，学■习后面的的容之前先对照检查本章巖后给出.的答 
案，若濟你殺得对不对> 


function fillBackgrcmndCoPor (canvas , context) 
var selectObj = document. get^lementByld (" 




var Index = selectObj. se-lectodlndex ;： 

var bgColorL =■ se^ecrtObj -optiTonsE ： iTKiex3:value; 


context, fillStyte 


context;fillRect{0^ Q~, 


蚀用的—个厥运穿，宰 _ 如方缺 

-- u m , 曼用达#颇兔瑀充 

f 个亟貧 h 


3 oa 





























增加 PackgrouwdColor 调用 

已经有 illBacfcgroundColor ^ i 数，现在只需要确保从 prGview - 
Handler 调用这个函数旨先来增加这个调用，这样在向画布增加其他内 
容之前才能有一个干净整洁的背岽。 



function previewHandler[} { 

var canvas = document. getEl&mentByld( ,T tshi rtCanvas M }; 

var context = canvas - g©tGontext:{ ,J 2d"); W ^ ^ ^ 


fillBackgroundColor (canvas, context); ^ -^ 一 ^ 

var seleC'tObj = document;. getElementByld C^shape"); 
var Index — selectObj + selectedlndex; 
var shape = selectObj [index] .value; 


fltf&fl rD^^d Color 
碍用， 沒它壤瘟匕稱松 
制的内容，巧 td 后的铪 
制砘俱 一个孑 垮蝥_:4的 


if (shape = 'Squares"')[ 

for (var squares = 0; squares < 20; squares'f+) { 


drawSquare(canvas, context); 

} 

) 
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回藤滇充样式 



JavaScript 特写 1ft ' M 

再來深人介绍 fillStyle ， 因为这是你第一次见到这个属性。 fillStyle 是上 F 文 
的一个属性,保存了在画布上完成绘制时所用的颜色。 


炎似子伴 阳 沈_ fUlstglc 也 
嚴 (1 过上下女來筘剌。 


方 过. 島不噚的甚 - 
■ pilstyU 基一个属 "fl . 布不 甚方 
■:在， ft 以 tf 设 g * 不4成用。 


context* fillStyle 




= "lightblue ” ； 

(i 意.鸟 css +. 不同- 如蓽不星璲 
用変|,必纸存值荈3加 id 咢。 


tKareiare ti 9 

Dumb Questions 


问: 


问: 


我以为要向 fillRect 传入一个颜 ■ 为什么颜色需要有引号， CSS 中 

色值来设置方块和画布的背景色。我实^属性值就没有？例如，我在设置一个 
在不明白 fillStyle 是怎么做的 。 它会影元索的 background-color 时就没有使用 

响仙 Rect 的工作吗？ 引号。 


用担心，我们所有人可能都会犯这个错 
误，至少一次 ） Q 

问: 唉， 我没辙了。为什么有 时候罨 
到的方块数不到20个呢？ 


答：问 得好。这与你以往的想法可能 V : 嗯， CSS 与 JavaScript 是不同的语 
有一点不同 。 要记住，上下文是一个言， CSS 不需要引号。不过，如果在相 
时象，可以控制对呂布的访问 c 你使色两边禾加引号， JavaScript . 就会认为 
用 fillStyle 和首先是设置一这个颜色名是一个雯量而不是一个字符 
个属性，告诉画布 '不管你接下来 © 爭，相应地会尝试使用这个变量的值作 
什么，都要用这种颜色”。所以设置 为紅。 

fiUStyle 之后，用颜色填充的任何东西假设你有一个变童 fgC 0 lor = T _ black ' 
(比如用 fi 〗】 Rect > 都会使用这种相色，可以写出代码： 

直到你再将 fill Sty le 设置为另一种不同 context , fillstyle = fgColor 1 
的颜色来改農顏色， 这是可以的，因为 fgCo 〖 o 『的值 


* 方块的 x ， y 和宽度都是随机的，有 
呰方块可能明显，但有些方块就不那么 
容易看见了。有些方块的 x t y 位置可能 
是599，199。所以我们只能看到这个方 
块的一个像素（因为方块的其余部分都 
在豳布以外> D 有痊方块可能只有]个 
像素宽，有些方块的宽度甚至为0， m 
为 Matluandonn 方法可能返回 CL 或者你 
也可能生成两个大小和位罝完全相同的 
方块。 


是 H b ] ack " * 

不过， coiKe ? a ， fiHSty 〖 e = b 〖 ack 就不行、 
因为 black 不是一个变量（除非你设 E 
了这样一个变这可能会带来一些说 
,你会发现犯了错谈， E 5 为你会得 


不过，对于这个应用，这都属于随机 
性，所以我们认为这是可以接受的，对 
于其他应用 T 就可能需要确保这种情艽 
不要发生了， 


到一个 JavaScript 错误 . 指出类似这样 
的消息 “无 法我到变量： black " (不 
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秀出你的 




任釀 


承參 




鸟此周时，再矽到 TweefShirUow ••… 




Jim: 我知道，而 a 居然没用多少代码，真让我吃 
惊^想想肴，如果我们还采用原来的服务器端方 
法，现在可能还在启动服务器呢。 

Frank: 看起来现在 可以试 试在设计中加人圆了^毕 
竞,它们与方块很像。 

Jim : 同意。在哪里？她可能知道画岡的 AP!。 
可能只需要调用一个 fillCircle 方法吧。 

Frank: 我觉得差不多！别管 JudyT, 我们自己也能 
搞定！ 


你现在的 位遛* 


3 D 9 



引入路径和孤 


、 0 _■心 


几个小时之疟 


Frank : 我真不知道怎么回亊 D 所有代码我都反复检査过了，不过，不管我 
怎么做，调用画布上什么都 没有， 

Judy : 嗯，给我看看你的 filiCircle 方法 • 

Frank : 你说“我的方法”，这是什么意思？我没有这个方法呀，我在直接 
使用闸布 API 屮的方法。 

Judy : pj 布 API 并没有一个 fi UCircle 方法。 

Frank : 啊？我以为有呢,因为我们有一个 fillRect … 

JudyH 现在知道自以为是的麻烦了吧。来吧 T 打开浏览器，可以在 
ht tp :// dev . w 3. org / html 5/2 dcontext / 找到这个 API 。 



… 实际上，画圆不只是调用一个方法那么简单，要比这稍稍复杂-些 。你 
盂要先了解路径和弧， 


Jim (走 进来） ： Judy, Frank 是不是告诉你我们已经选定圆 T? 
Frank： 嗯， Jim，enough way ithway ethay irclecay*! 

* 这是所诮的张式拉丁语 (pig-Iatin) T 并非真正的 
语言，是为了让别人听不懂在讲什么，闹着玩而发 
明的一种好此语言。这句话的英文译为 "enough 
for the circle"( 不要再提 ® 了） 
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“眘忸: to " 绘御 

具体画圆之前，需要聊-聊路径和弧 a 先来看路径，画 
一些三角形。如果想在画布上画一个三角形，并没有一 
个现成的 fillTHangle 方法，不过我们确实可以创建三角 
形。 首先创建一个三角形形状的路径，然后用笔划描这 
个路径，就能在画布上画出一个三角形^ 

这是什么意思？嗯，假设你想在画布上很精细地画画， 
可能会拿一支铅笔，在画布上比照着一个模子描出来 
(暂且把它叫做路径 ） e 你要轻轻地画 T 使得只有你能 
看到这个路径。接下来，如果你对这个路径很满意，可 
以拿一支钢笔（按你选择的粗细和颜色> ,用这个钢笔 
描出路径，使毎个人都能看到你的三角形（或者你用铅 
笔描出的 任何形 状）。 


e 


秀出你的 


■% 






在画布上用线绘出任意的形状时也是这样做的 D 下面来 
画一个三角形, 看看具 体如何 实现： 

1 


播珞枝的耜笔 
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如何利用 


我们 sn 完威3三铯 衫的弟 一条这 
现存爲来蒌第二 


context. lineTo (125, 30} j 






i 



妖續完域1/现 ft Rf f 再描一条钱邾 5 J 
线这个三爾形了， ^ itt , P 1 M 用 
oLossm^i 方沾闭含 a 个珞拎 n 


'context .el o aePath 0 1 * 


% 


-V 



裁们的三角衫右威 5 f 
不过曩记 ft a 
个踣荇.奸以现在对用 
卢这不芍汜。 


cbwPwtJn 方#将路柃的起妫点 (興 x ^ o ) AM ^ -^ 

fj 备前3|■荇的蚤后个点 (1^5； so ) ^ 


现在 e 经有3路径！然后嘬？ 

当然要使用这个路径来画线，并用颜色填充你的形状！下面创建一个简单的 HTML 5 
页面，其中包含一个画布元素，输入前面的所有代码。再运行试试看。 

context , beginPai-h 0 , 
c ontex t, maveTo (10 0 r 150); 
context, lineTo (250, 75) r - 
context .lineTo (125, 30); 
context .closePathQ; 




前的 ik 的代兵 ^ 



context,!inelfidth ^ 5; 


context, stroke 0 ； 


context.£illStyX« s n rBd 1 \- 

■ _■■■ _■ ■ ■ ■ ■ ■ ■ ■ ■ ■■^BtrarB-vava-fa'iiB ■ ■ ii#h#ki i 4il < b + i + fl + fi + C + a + i + l + 4 + 

coiik^-6'X^i * fI? ■•■”，■■.."■<■•■•■ »■«■■■■■■■■■■■■■■■■■■■■■■•■，■■■•■«■ •“》，■■ 

K ^_ ( if 笮一墊瓣代鹆 * 给 a 噔代砝加 m 麟， 
相出汸 iC 碎这唆代 砝金漱么。 加 戣页® - 
你的钱 法的 療？磧时照检壹本章蚤后给出的 

- 鲁 f 。 
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备魯 _ ■ I 

秀出你的芝术 




要创建_个圆，首先要创建一个路径 。 

接下来就会告诉你如何描一个_作为路径。一旦知道了怎 
柞做，你就能创建你喜欢的任何类切的圆了。 

下面再给出一些细节。你知道如何开始一个路径，对不对? 
就像前面我们所做的，可以使用这个 代码： 

context. begiEiF«Lth{}; 

还有一点我们没有告诉你，上下文对象中还有一个名为 
31：0的方法 | 


context.arc(150, 150, 50 f 0, 2 * Math.PI, true); 

你友不圣 a 记饵 义闲 

这个方法做什么？哈，我们会在下一页找到有关的细节 D 这蔌们 f 过的用 

不过，你可能会猜到，这会沿一个圆描出路径 u 现4 龙 把它记 

■fi ， 
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分祈方法 

分解 arc 方法 

下面深人分析 arc 方法 t 査看它的各个参数； 

context * arc ^x, y r radius, startAngle, endA^gle, direction^ 

arc 方法就是要指定如何沿一个岡描出路径。下面来看各个参数的作用： 



舞僉黼承參 


x,y x 和 y 参数确定圆心在_]布 
上的 位罝。 




context.arc(x , f radius 



radius 这个参数用来指定圆的半径 
(宽度的 172>。 




314 








秀出 你的艺 术夫% 


舞往翻承參 

direction 确定以逆时针方向还是顺时针方向创建圆 

弧路径 9 如果方向为 true ， 就是逆时针 s 
否则如果为 false ， 就是顺时针6 




妖连 ㈣ H 如幕 





star'bAngle f endAngle 9 direction) 


下面是重点！ 

startAngle , endAngle 弧的起始角和终止角 千万别跳过不看。角可以按负方向（从 x 

确定了路径在圆上的轴逆时针）度量*也可以按正方向（从 X 
起点和终点 a — 轴顺时针）度量 D 这与 arc 路径的方向参 



紙的终魚 


我们&播 
的教 a 


蜉 it 角 4 x 釉烏织 
的终泉 Z 何的免。 



板的起点。 


数不同（下一页你就会看到) 


义 X 釉 夸的糾 度 f 的 H 
甚资的 D 如 
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关于弧的体验 

浚 t 畝的俅用 

现在我们需要一个好例子。假设你希望在一个圆心位于 x =〗00, y =100 的圆上描 
一个弧，而且这个圆的宽度为150像_ (或者半径为75像 素）。 另外，你想描 
的路径只是这个_的1/4, 如下； 




^ 1 . 







夸往翻承參 


迮的 ft 方侖糂 ii 个祗 



鲁 44 的庠羃蒗 


这魷 4 我们的紙珞柃 


起诒雋暑终止免 


H t ,我们1軸蝻勿斜度 I 
終 ii 铯， 兩鉍終么免&1汰。 


丰柃 >6^0 


d )^' 


A=±00 y lj=±0O^ 


现在来创建一个 arc 方法调用，描出这个路径: 


❹ 从圆心 X , y 点 开始： 100,100 


context.arc(100 , 100 § 


0接下来，需要这个圆的半径， 

context..arc < 100 f 100 f 75, , __ j _); 



9 


起始角和终止角呢？嗯，起始角为0,因为起点位于相对千 X 轴的0°角。终止 
角是 x 轴与弧的终点之间的角。由于我们的弧是一个 90 w 的弧，所以终止角为 
270° (90+270=360) (注倉^如果按负值或逆时针方向来度量，那么终止角就 
是 

context.arc(100, 100 r 75, 0, d»gr*«aToRadi*ns(270), _); 

最后，按逆时针方向描这个弧，所以使用 l ^ ue 。 


精后 S 金異来介绍 
这个方法。它的<1 
用軚1捭（簌们刁 
ff 的）度粍葙*舐 
度 （ 上 下 t 的象逹 
懲蠢值用袄度）。 


context.arc(100, 100, 75, 0 r degreesToRadians(270 ), t^ue 
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秀出你的 : d 天以 


我说你却说畝度 

我们每天都在谈论圆的角度： " 漂亮的 360 ° rt ,或者 "我 
沿着那条路走，然后做了一个 180 °大转弯”，或者……嗯, 
应该能想到，还有很多很多。唯一的问题是，我们是从度 
来考虑，而画布上下文却从弧度考虑。 

现在可以告诉你； 

360 度= 2 Pi 弧度 

如果你想从现在开始自己在头脑里计算弧度，那你可得贽 
心了 a 或者，如果出干某些原因你不想自己来做这个计算, 
可以 给你一个方便的函数帮你完成这个工作： 

function degree&ToRadiAns(degrees) { 
return {degrees * Hath.PI)/ISO; 

f } 

汸石钱在蟪璆定俗一辈中 
见到过这个&激 


灞 

亮的対 0 °r 噗， , 
我的意 思是， 漏亮的 {° 


舐度只！角度的另—种度 I 。 1 
(或老 。 


I 认度碍«舐度，索龙雖 

以兀再 %H±so n 


使用 ti 个去數 a 


3 绍忍到鋏 ( Hf 逢用 
^ X MUtKPUt^ 宏 _ 个 ® 的终 J ； 

兔。 伢也3以这样鬼……或老;越 



粉演浏 K 器 



个 ar C 方法饷用，在®上 Bili 斯有值，包揞 S 个方法创 


context * are( 100 f 100 , 75, degceesToRadians(270 ) f 0, true) 




杏这个® 1 籽出 M 有参 
教， 然后®出这个方法 
< H 用釗速的珞拉 。 
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增加」 i! 

爯来编茸 TweefShirt 的 ® 代码 

既然知道了如何画圆，现在再回到 TwcetShin, 增加一个新函数 drawCircle fl 我们想画 
20个随机的圆，就像前面的方块一样 c 要画这些圆，首先我们需要确定用户在彤状菜黾中 
选择了圆 D 下面把这个代码增加到 previewHaiKJ〗er 函数。 

编辑 tweetshirt.js 文件、并增加下面的新代码 6 



function previewHandl^r () { 


var canvas = document. gtttElementById( T, tshirtCanvas"); 
var context — canvas.gQtContext( r, 2d TI }; 

£ilIBaekgroundColor(canvas, context]; 


var selectOb j = document. qtt tElementByldf"shape 1 "} f 
vac index = selectObj, selectedlndex ； 
var shape = selectOb j [index].value; 


if (shape —— "squares ”） { 

for (var squares = 0; squares < 20; 
drawSquare (canvas, context ); 

\ 


dquar«s++) { 


} if = "circles*')( 

for (var circles - 0; circle b < 20; circles^H-) { 


这个代 媒赛 i 去島谢後 
的代 ig / L 今完全_。_兮* 
用户选择系不 I 方續 私— 
我们就令深^數® 

基皺 ） 《 


drawClrde (canvas^ 


context ) ; 



埒函布扣 I ：下 zf . 入 
dtawdi^USM. 軚(拿 
用 draw^uari^^^ 


要画一个完整的圆 T 起始角和终止角是什么？ 

你要使用什么方向，逆时针还是顺时针？这会有影响吗？ 

p wye 孕與下釦箄枰萍 '柏1爭：當 


318 第 7 章 









秀出你的 


e , 




编写 drawCircle 凾数 • 


# j 


挪 


现在来编写 drawCircle 函数^要记住，我们只需要画一个随机的圆。 

其他 代码就是将这个函数调用20次。 

妖 f 象®泠玦—样- ( A 军使琢^ 作 + K 
$ F it 来赶秃® t 饵 a 丈 4 


function drawCircle (canvas, context} { 

var radius = Math, floor {Math * random () * 40); 
var x - Math .floor (Math, randam(} * canvas .itidth) ； 
var y = Ma~th. floor (Ma'th. random^ ^ * canvas. halght：) 1 ; 


度和 $ 皂礁 t 。 戏们分别选择？介 
鸟 t& 和秦皂 Z 呢吮一个随机數。 


context .beginP^th Q ; 

context.arc (sc, y, radius^ 0, degreesToRadians (360) f tr-ue); 

^ 这 f 璉用终 tt 乘缉 Ji)- 个完 
context.fillStylB = -lightblne"; 螌的 D, 苟以治聪遂 ㈣ 訶鹼制不 

context.fillQ; ^ W ㈣ 过和一个 ®, 咖啷个方 ㈣ 

fiLtstyLc , 样后用 fiovttaxt ,- ftLL () 

湞充这个路校。 


不 f 龙 


试一试 f 


现在输人这个代码（别忘了还要增加 tlegreesToRadiam 函数），保存，然 
后在你的浏览器加栽这个文件。我们会看到下面的结果 （由 于这些是随 
机的圆，你看到的4能稍有不同）： 


..] V t i + IfMnTpii/hK h cW， 

.▲^^^^^ H | aiaiiia | aai | Baa | aii | | i j |||Ha|a|B|aHaa|||fli|a|a|||M ^ Ba| 



Select backgrouiKl color; wh^t £^f 
Cirti£& of %4[uareti? ctreits * i 
S^ttci itw color. ejMk : | 

P»cM i rweex: Jl 


^S4. 




hmhbhhhbh ! 
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茶点时间 

哦/阳才适几瓦其有竟丑， S 筘我 舴迓; F 扣 
谬，们准安«赛点， 

—佘，呓点竽点？ 1 E 方蜃 於为在你吃爹米时佘 
根无斯 ， 我们迗佘維你 —费有 ite 聆方西 f »# 
本边的钵匀 J p 

弗*隹卞奔，食，馑值啗，沣饰的 
大雎和 M 孑舴槳点本芦 # IS 掛再谀弟秀成 
丁 werfShfrf 代格 / 
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在右边我们会看到一个笑脸（如果你愿意，也可以是一个巧克力笑 
脸饼干 ） ^下面的代码就是用来画这个笑脸的，已经快完成了，我 
们需要你的帮助来完成它。经过这一章的学习 s 加上你之前的努力, 
你已经¥握了所需的全部知识，完全可以完成这个任务。完成之后, 
可以对照检查本章最后给出的答案^ 


function drawSmi ley Face () { 

v^r canvas = documont + getllementById ( n smiley T, ); 
var context = canvas.getContext(_’2d"); 




秀出你的艺术 




: TS 


心 y = 3 叫 s 況 r 

半尽- 


o o 


2 ⑽ 
半枝 = 2 lS 


= ^oo r 2 ^； 


这我 (0 想 不过你 sj 翁想 
赴一费 4 JE 的巧克力荚炝翱寻… 


conte xt. begin Path 0; 

context.arc{300, 300 r 200„ 0, degreesToRadians (360) „ 
context. fillStyle = T, #ffffcG"; 
context .fill(h 
context,, s troke {}; 


true); 

衝艮这郭分我们竽伢盂绫 
h 注意 a 个围用餐毯域龙。 



context .beginPath(); 

contexture ( t , 25, 

r 

f t:rue); ~ "-达是在填 

context. stroke 0 ； 



context.beginPath 0 ； 

context. arc (4DG, , , 

t 

f i ； f— 


context:, s troke() ; 


context. beginPath {)； 

context._(_, 

context ■__(_, 

context*_ —{ ); 

context. gl nPathQ ； 

context._(300 r 350> 

context:^ stroke (); 


)； 


)； 





#分-， 


_/ degreesToRadians {_ ) f degreesToRadian^ { 


) f 


)； 
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为增加 ; w 



欢迚诊來 


休息过，放松过，现在你又回来了，我们已经到了这个 
创业项目的最后冲刺阶段。查看之前所做的全部工作, 
现在只剩下一件事，就是在画布预览中显示微博和其他 
文本。 


要在画布上放一个微博，首先需要你的一些最新的 微博， 
可以从中选择,.我们将使用 JSONP 来完成这个任务。如 
果你还记得第6章的内容，应该知道如何来做到 D 如果有 
必要，可以返回第6章简单地复习一下 3 我们要 做到： 


A 在 tweetshirthtml 文件的竣后增加一个 < script > ，调 
V 用 Twitter JSONP API 。 我们要请求一个指定用户的最 
新的状态更新。 




实现一个回调来得到 Twitter 发回的微博。我们将在第1 
W 步增加的<30"啡>的111^中使用这个回调的函数名。 


H 的 HTML 殳件。 

假设! i f 是 Mead 无黃，第 外和 
这禅杖敍少饮莶树 ） D 


■ » i - 

<body> 

<form> 

</form> 



x^rmw (我们想；占曲荔恃 ，: p 用免紙, 


哉们的 I S ii ii iMM)TV/itter KRjLM SiM 1 ^jSQN F 然后将 

(相后舍定义这个 ® 详）。 

将 a 个矻為你的角卢名 r 

ii 是 JwLtUrAPli 聲用 。 栽们銪求一个 或老如冪愿#,也3以松 
蚤 S 逹妒， d 含狨 洪用户 的妖 S , #台何真姑用户名/ 


<scri|>t b rc= T, http; // com/statuses/user_tim 电 1 ina/wickgdsmartlyoson? 
ea llback^pd^teTwee t s n > 


</script> 

</body> 

</html> 


这课蚤 fe , JSON 将作入迗个函數。 


犯 d 个代运铪入列 i 本±_的 
(这行 rt 鹆大长.乇法4 
丰中用一盔承） 。 


的内容很多。釦菜它些不太龙楚 r 
JSONP I 如句 !(%¥), 
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得到微博 

我们已经完成了最难的部分，从 Twhler 得到微博。现 
在需要把它们增加到页面 <f orm > 中的 tweets<se lect > 
元素。再踅习 一下： 调用回调函数时（这黾就是函 
数 updateTweets ) ， Twitter 会返回一个响应，其中包含 
JSON 格式的微博 D 


秀出你的 





的响.在 I - 个撖馎數进 L 茬 个斑律包含大 
簧數 我乃 M 羯 I )的只袅澈馋的 t 本。 


编辑你的 t w eetshirt.j s 文件》在最下面增加这个 
updateTweets 函数。代码如下: 


达 1 我们的©谈。 


作入一个确在，萁中岜含暹泛 
更新中的埯绎 ( 0 滅一个激拽 

m ) , 


v 


珥 |_ j 表輩中 tw « ts 选#; 的一个 
? 1 用 : 、 


function updateTwee ts (hweets) { 

var tweetsSeleGtion = document. getE lament By Id (^ tweets IT ); 

的子傲 f 4 數通中的荔-个斑馎 < 我们薯 


far (var i ― 0 ; i < tweets .lengt,h; i++) { 

tweet = tweets [i]; 


<^r 


var option = document-ci:eateElement( TI opt ion" J 
option, text = tweet. text; < 

option .value = tweet, te x t ■ repl aca ( (t V' *\ *' 1 iT )； 


tweetsSelection .options T add(option); 


& 舍 Ji 一个新的送砀夭素 6 
- - - 杨苒全本设 E 的这个徽傅 



mm 


tweetsSelection. selectedlnd^x = 0 ; 

(與中 g 舍的第一个送碣无 
#) f 碥保洼中蓽一个墉 


然后 ua 个靶选錄 
無古增加|_)表攀中 
的 tw « t 迷绛走棄 6 


的备个黴馎 t 威这个处理 g , 铽有 了一个 
<^ Uc ， t>x f ,其中爿应 S 个撖悚个 
遂场。 


你现在的位贯* 
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用丁刪 n e r 测试 Tw e e 彳 S h f rt 

试一试微博 

来做一个简单的测试。确保已经为 tweet shir t.j s 和 
index.html 增加了所有代码。另外要保证使用一个 
Twitter 用户名，对应这个用户名的 script src URL 中有最 
新的微博（这样可以确保你总能看到一些微博 ） D 加载 
这个页面，点*微博选择元素。你会看到： 


激搆菜辈/輿 
中包倉盎正栌撤惮。 
太钱3 












•孜麒 


免 Eccl hfljukground color 議 《 l"l 

Circles or squares? p 

.一 »■„ — --u 

Select le\i c&icsr Uid i ) 

Pick fi <^CCf, If iT*» wn^rti hfer^ftinq, lt r i puttrma on 4 

- ■'* ■*■ - - --- - ■ ■-■!>■ _ . _ _1 



a 









Jim : 就快完成了。需要明确要显示的所有文本。我们有两个 
消息需要氧示:“1 saw this tweet” 和 “and all I got was this 
lousy t-shirt! w 另外还有用户选择显示的微博。现在必须搞 
清楚如何显示这个微博，当然还要对文本应用一些样式。 


Frank : 我认为可以在画布上放一些文本，然后对它应用一些 
CSS , 可以吗？ 


Joe : 我可不这么认为^画布是一个绘制区，我觉得不能简单 
地放罝文本并指定样式，我们必须在画布 b 绘制文本。 


Jim : 嗯，这一次我可有经验了，我巳经在査看文本的相关 

API 了 D 


Joe ; 很好，我还没看 过呢， 看上去怎么样呢? 


Jim ； 还记得 arc 方法吗？我们必须使用这个方法定制绘制所有 
文本 t 
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秀出你的 


■术％ 



Frank : 你在开玩笑吧？如果是这样，我想这个周末算是泡汤了。 

Jim ; 哈哈，理解！不过我说着玩呢!实除上有一个 fiUText 方法，需要指定将在画布上绘 
制的文本，以及要在哪里绘制（文本的 x , y 位置） 

Joe : 听上去很简单啊。那么样式的差别如柯体现呢？我记得“初样”中微 IT 文本足斜 
体，其余的文本是粗体。 





Jm : 需要再多做一些了解，有很多不同的方法来设罝对齐方式，字体和填充样式，不 
过我还不太淸楚如何使用这些方法。 

Frank : 也许我能帮忙，不过怎么没有 CSS ? 


Jim : 抱歉，就像 Joe 说的，这是一个在画布上完成绘制的 API , 它不会以任何方式使用 
HTML 或 CSS 。 

Joe : 嗯，来看看这个 API 吧，然后我们就能试 着在阐 布上绘制文本 “I saw a tweet " , 
来吧， Frank , 一起来，怙况没那么糟，相信我们能用到你掌握的那些关于字体和样式 
的知识。 
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关于结构和表现 的讨论 







兵子在基布上轮制丈辜，书一个问*我不螬6,我 
们总是级请由容乌老现分离。 对子* 確， * 土#它 
们墨一祥的„我的*总盔，甙容和忐现 你爭袢 浚布 

钤离 




这个问题问得好。 

现在来研究这什么要这样做 $ 记住，设计画布是为了提 
供一种方法在浏览器屮表示图片 D 画 布中的所有一切都认 
为是表现，而不是内容 U 所以尽管你通常认为文本（当 
然还有微博）是内容 ， 但在这里，必须把它认为是表现。 
这是设计的一部分。就像艺术家把文字作为艺术创作的一 
部分一样，现在你就在使用微博作为 T 恤设 计创作 的一部 
分。 

表现和内容分离 是一个 很好的想法， 一个 主要原因在千 > 
这样一来，浏览器可以聪明地处理不同的情况下如何表 
现内容；例如，一个 新闻网 站的文章在大屏幕上会用一 
种方式表现，而在你的手机上则会以一种完全不同的方 
式表现。 

对子我们的 T 恤设计，我们希望画布中的内容更像一个图 
像：不管如何浏览都应当采用同样的方式显示 。 


所以，下面开始在画布上绘制文本，让这个创业项 g 运 
转起来吧！ 
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秀出你岐 


代碚祓贴 4 

这是 空第一 次尝试 圈 1 布文本。下面我们给出了 drawText 的部分代码，我们将调用这个方法在 
预览画布上绘制所有文本。看看你能不能完成这个代码，在画布上绘制1 saw this tweet " 

和 "and all I got was this lousy t ^ hirt * 5 , 绘制具体微博的代码以后再完成。学习后面的内容之 
前先对照检查本章最后给出的答案,看看你的答案对不对。 



function dr a wTex t (ca nva s, context) 


var selectObj — document. get,£IsmentByld ( 1 
var index = selectObj, aelectedlndex; 
var fgColor * seleetQbji [index]/value ， 


context . 


fgColor; 


context . 


context. 


p bold lem sans-serl£' 


■left ， 


context. 


^ M 矛 f H I saw this 
^ tw « t " 生本的 


20, 40) 


暑存 @ f 给出 
: i 程，将乘含 
在 a 粟旄入哇 
•J 撤鳟龙本的 


H Get the selected tweet from the 'tweeds menu 
U Draw th^ tveet 


context. font — '* 
context. 


II . 



H 垅傅将用一神斜诛 seriff 
;r-s 裁们 4 望 a 个立 本璉用 
抱冰 sn kvs-sfiiaf? (4., 

m: 我们4望这个丈本放存右下笼 


context . 


("and all I got was this lousy t^shirtf 


_ __,__ )i 

'..一 m w _ K 4 逆之0偉棄 t 拒歲述 y 
斗 〆 象 # 的 f 会憑绘制&个丈本 y w 懂乡弟_ 

行 i 本年衝 1 
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深入分析龟布？，心 


£) 





© 布特® 



既然有机会在画布上绘制你的第一个文本，现在可以更仔细地分析画布 API 中提供 
的文本方法和属性。在练习中你已经看到 * 这是一个相当底层的 API , 你必须告诉 
上下文你要绘制什么文本、要使用哪个位置，另外要使用什么字体 & 



3 T 顧承 




在这个“特写”中，我们将分析对齐方式 v 字体和基线属性，另外还会详细分析填 
充和笔划方法，等你翻过这一页，你就会成为名符其实的画布文本专家！ 


t e X t A 1 ign 属性指定了文本的锚点位罝 。 默认值 
为 ** start " 。 

context ■ textAl igrx = _ T left’_; 

可取值 包括: start , end , left , right 和 center 在 
从左到右的语言中， Start 和 end 与] eft 和 right 含义相 在的杏 居中 右的齐 

同，比如英语，但在从右到左的语言 （如 希伯来 
语)中则正好相反^ 




填充和笔划 

就像矩形一样，我们也可以用笔划和填充方式绘制 
文本 a 需要提供要绘制的文本、 x , y 位置和一个可选 
的参数 max width , 如果文本宽度大于 max width , 这 
会导致文本相应缩放。 

context , fillText (^Dog"! 100, 100, 200 ); 
context. atrokeT«xt( 100, 150, 200); 


读充 本, 

Dog ^ 



^ 笔到 i 本 




如單丈本 t 度大子 古 ㈣ 功 
端放以 ii 在 a 


- - 
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字体 

要设置卞体屈性，可以使用 css 中使用的相_格式，这很方便。 
如果要指定毎一个厲性值，按顺序则 包括： 字体样式、粗细、大 
小和字体族。 

contBxt * f ont. - T, 2ein Luc Ida Grande ,T ; 
context. filiTejtt{ ,, Tea ,f I 100 r 100)^ 
context, font = "italic- bold l,5«m Tim«s f serif 
context. fillText f ,T Cof fee ,r ； 100, 150J; 

规范建议只-使甩矢量宇体（位 IF 宇体可能不能很好地區示） 


Tea 

Coffee 








棊线 — . + — I 

! \ 

七 6 以£^ 611 ^属性设晋字体中的对齐点_并确定字母所在的 

r 基线。要看这个基线 对玄本 有什么 影响， 可以在绘制文本所在的 
" x ， y 点上画一条线。 



context, b^gl nPathO ； 
eon tex t + aao veTo {100, 10 Q); 
context. lineTo (250, 100); 
context . stroke Q ; 
contejtt.textBaaelin© ^ "middle"; 


AlphahAF 匕 

Alphabet kn Attorn . 







context . fillTextC ^ AlphiLbet ^, 100 , H > 昨； Alphabet 叫 

5 取值 包括： fop. hanging, middle, alphabetic, ideographic 和 
bottom 。 默认值是 alphabetic 。 可以尝试"不间的值来看你需要哪一 
种（更多细节可以参考规范 )_ 6 
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绘制 :j 

试一试 drawText 

既然已经对这个 ah 有了更多的了解，就不要只是纸上谈兵了，输人你在代码磁贴练 
习中创建的代码，这就是你的代码，我们已经把磁贴变成 T 具体 代码： 



function drawText{canvas r context) { 

var selectObj - document.getElementById ( M foregroundColOE ,p ); 
var index - BelectObj. sel^ctedlndex ； 
var fgColor = selectObj [Index] * value; 


context ■ fillStyle = fgColor; 
context.font = ” bold lem sans-serif%- 
context, text Align = _ T left"; 

context.fillText<"I saw this tweet' 20, 40); 

1 械后我 n 含补充松 
〆 制澈傳太本的代 ^ 

context.font = "bold, lem sans-serif ，T ; 
context.textAlign = "right"; 

context + fi 1 iText{ M and ail X got was this lousy t-shirt!", 
canvas .width-20, canvas, height-40); 


输人这些代码后，更新你的 previewHandler 函数来闕用 
drawTexttigt , 在浏览器屮加载这个 代码， 来试一试。你 
应该能和我们样看到这样的结果： 


这 14 之本。我们奋正鉍的忆藍上 S 3 SHktS-seirif 幸体 
的在 f 本太本。 



Pick R tWCtir wpwthtmrUfiBt rfi- iwrtK-putliffa m a 


^^rpen your pencil 


试着完成 drawText 函数 D 你要得到选择的 
微博，将宇体设置为一种斜体 seMf 字体, 
比默认大小稍大一点 (〗.2em ), 确保文本左 
对齐.另外位置在 x = 3 D , y = 100。完土这 
最后一步之后我们就能看到 TweetShkt 了！ 


抵⑽倾的上赤 ■ 7 4 偷要 
下—赉的爸幸! 
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完成 drawText 轟数 

下面给出我们的答案。与你的代码有不同吗？如果你还没有输入你的代码，请输人下面的 
代妈（或者如艰你 M 意，也6了以输人你自 uL 的版本 ） 》然后電新加载你的 index » html D 
下-页会给出我们的测试结果。 


B % 




.■T 署 


秀出你的艺术无忪 



任麒承 I 


*r 


function drawText(canvas , context) { 

var selectObj ^ <Joeumont T getElementById ( ,1 fore groundcolor" 
var index = selectObj. salectedlndex; 
var fgColor = selectObj [Index] .value; 


context.fillStyle » fgColor; 
context,font = "bold lem sang-serif ,T ; 

伫 ontsxt.textAlign = 



s ele c tObj = document ■ ge t E lojne ntByld ( f, tweets n ). 
index = sQlectObj.sel.c:tQdIfKl€Xf 
var = selectOb j [ind.«x] ^value; 

context.font = '■ italic 1.2mm serif" 1 ; 
c ⑽ text.fillText 《 tK©et, 30, 100); 


俘 不電靂爯栲嫌馎主本在的齐 .® 為 
iaf 6?5^£ 7的齐 方式。 


〆 


趙悄菜$较__选场。 


备 * a ■ # 釅 

.. 具在植蓋3。, 給制3个殳本 


context.font = "bold lem sana - serif _，； 
context.textAlign — ^right"; 

context, fillText ( ,f and all I got was this lousy t-shirtf 71 , 
g anvas + width-20 r canvas, height-40); 
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启动 hveetshirt 

-个简单测试 
然后残祿年^启动吒 

希望你与我们看到的一样！不错吧， 
是 不是？ 再对这个界面做些真正的质置 
保证检验：试试所有颜色和形状的组 
合， 或者换个你希望的其他用户名。 

是不是准备真正启动这个项目了？那 
就开始吧！ 


rlfeffi 拯中£孑 5 
m . 太螓？！ 
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汪必译这治 iweetshirt 备 ) 始人喝 ? 





















秀出你的艺术 



首先需要一个图像 ^ 我们已经在 TweetShlrt 文件夹里放了一个名为 twitterBird.png 
的图像 Q 要把这个图像放在画布上，首先需要一个 JavaScript hn^e 对象。可以这样来 
得到 S * 

. . r~ 

var twitterBird = new Image(); 


舍〕瀘一个新的对象 


twitterBird. src = ，■ twitterBird.png” ； 亡 — 料它的源设衋寿囹律。 

A 现在下一部分就很自然了，要用一个 t 下文方法在画布上绘制这个图像，这个方法你 
应该能猜到》名为 drawlmage 。 


context.drawlmage{twitterBird f 20 f 120 f 70, 70) 


个 

連用 drawlmage 大 { 去。 


/ / 


象 ■ 。 


^关于圈像还有一点需要知遒：图像井不总会立叩加载，所以在绘制图像之前需要确保 
图像已经完全加载。那么采取行动之前如何等待某个东西完全加载呢？没错，要实现 


一个 on load 处理程序 


twitterBird.onload unction() { 


(if 花出：密像加 栽时， 
杖执行 ii 个基數。 


}； 


context.drawlmage(twitterBird f 20, 120, 70, 70) 

@ 用上下 SZ 的 druwtnunge 方 


你现在的位置» 


333 





增加圏像 





看看你能不能利用 Judy 给出的代码完成 drawBkd 函数。 drawBird 函数 取一个 画布和 
上下文参数.在画布上绘制一个小鸟。假设利用这个 ® 数我们将抱 "twitterBird.png" 
放在 X =20, y=120 位1上，宽度和高度都为 7 0。我们已经帮你写出了这个方法的声明 

和 第一行 代码。 本章最后会给出答案 D 


1 






承命 


function drawBlrd (canvas , context) { 
var = nev Image {}; 

饬的代鹆 S 4 ， 
ta I , 


則 S I 龙在 pm^vvttfthdUr 凾數中 增加 
一 个 晶蛊访用,. 


还有一个_试 


反复检査你的代码，再做一个测试！哇，现 
在看起来 R 是太完美了 

用圆或方块多试几次。你会注意到，我们使 
用了'"个有透明背景的 png 图像，这样如果圆 
和方块在小鸟后面也能显示出来。 


太襄蕙 5_ 哉们 6 绍孖发 5 
一个槔链的在用。不过泛薄 -~7 
前®戌长 L (念來食现电 
孑琦务等搴它 s 









I 1 « W _ 1W ㈣ f 

I 

""'.V wtirltl nx r^„ x it > 5 Wftrfh 


— _ ― h ■ fc — 


m 


^nti, lK tttt lt ^ r _." 


㈣ 糾 _脚 this lousy 


Sc!ect b«cl(gfuund ccJon 

Circles or ，抑 s ? [町卞 
SeJecr icxi ctthr B i it ir T> 
❿发 a fVMee [: \f , ri 


ff* worth 


lnfl ? n 
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秀出你的艺术充 3 


tjierejm'e no 

Dumb Qiiestions 


闷 


w 


我们以前没有见过 Image 对象 。 你在画布上增加 
围像时用到了这个对象^这是什么？为什么我们不用 
documentcreateElemGnt ( s 1mg ") 来创建这个对象呢？ 


答 


* 问得好。你提到的方法也能创建图像对 
象 0 JavaScript Image 构造函数无疑更直接，可以从 

JavaScript 创建图像，还允许我们对加载过程有更多的控 
制（比如我们能轻松地使用一个处理程序，从而在图像 
加裁时得到通知> , 

所以说，在这1我们的 I ]标是创建一个因像，另外在画 
布上绘制这个围像之前先要确保它已经加载。要达到这 
个 P 的， Image 对象是最合适的。 


问 


® 布很酷……不过与 HTML 相比也有些麻烦 0 除 
了基本形状之外，其他更复杂的图形绘制起来肯定很困 
难。 

苓： 受无疑问，编写豳布代码时实际上就是在编写® 
形代码， 洲氬器 会帮你负贪很多细节问題,比如让元索 
浮在页面上，使你不用操心一切都由自己来绘制。与洌 
览教不同，使用凾布时，你必须告诉凾布所有内容应该 
放在哪里„> 

但是， ©布能 M 予你超强的能力,可以绘制你能想象的 
几乎所有图形 （ E 1 前还只是 2 D 图形），而且现在还只是 
画布的早期阶段，将来可能还会出现一些 JavaScript 代码 
库，利用这呰代码库可以更容易地编写在®布上绘制图 
形的代码。 


问 


我注意到，对子很长的微博，超出画布边界的微 
博会消失，这个问题怎么解决？ 

答:要修正这个问题,一种方法是查看微溥中包含多 
少个字符，如果大于某个数，就把它分为多行，单独地 
把各行绘制到豳布中^我们在 wickedlysmart.com 上提供 
的代码中已炫包含 T 一•个名为 splidntoLines 的兩数，可 
以利用这个函数来完成这个工作 9 


问 


我还注意到，有些微博中包含 HTML 实体，比 
如 & quot ; 和 Aamp ^ 这些是什么？ 


答: 


博中提交的字符转换为 HTML 实体 D 这是一忤好事，因 
为有些特硃字符 （或者 甚至彳 |兮） 可能会髟咍我们从 
JS 0 N 正确地得到微傳，所有这些特殊字符都会表示为实 
体。如果我们用 HTML 显示 微馎， 这些实休就会 在洌览 
器中1彔为你要看到的字符，就像你向页面中增加的实 
体会在浏览器中正确地显示一样不过，可以看到，在 
©布中它们看起来可就不太妙了 a 遗憾的是， U 前凾 
布 API 中还没有函 fe 能够把这呰实体转换回原来的字符， 
所以你必須自己来完成 4 

能不能在画布中做些有意思的搴情，比如对文本 
或形状加阴影？ 

^ * 当私可以！利用函布你可以做很多有趣的事 
情，阴影些蜮是其中之一 a T 以想見，只需对上下文 
设置一姿4 性軋 能创建一个阴影。例如 T 要设置阴影 
的通镜大小，可以设置 context , shadowBlui ^ 可以用 
eomext.iihadowOffsetX 和 context ， sI \ adowOffsetY 设置阴影 
的位置，另外用 context.shadowColorT ^设置阴 影的赖 
色， 

利用画布还可以做很多其他事情，你可能想试试、比如 
绘制梯度 1 旋转形状，在矩形上加上[ I ]角等 。 

^ * 用画布还能做哪些有意思的 m 情？ 

答： 太多了！后面的几章我们会介绍另外几种使用画 
布的方法，如果要了解更多，很有必要看看画布 AP : 
http :// dev . w 3 , org / htmI 5/2 dcontext/ fl 

这些画布代码在我的移动设备上也能正常工作吗？ 
我是不是还得为移动用户貢写代码？ 

I r 如莱你的移动设备有一个现代測虻器（比如 
Android , iPhone 和 iPad 等等都会提供这样一 个阑览 器）， 
那么这些代码完仝可以正常工作 （页 面的大小可能不太 
合适 T 不过功能没有问題> a ©布 的妙处就在子你所画 
的东否在任何地方 (只要是支持画布的測見器) 肴起来 
都是一样的（因垮你在用原始像素绘制），幸运的是， 
现代的智能设备（比如 Android ¥ iPhone 和 iPad ) 都提供 
了先进的浏览器，已经具备桌面浏览器的大部分功能 。 


用来得到微博 JSON 的 TwiUer API 会把人们在微 


你现在的位置 ► 


335 


画布元数据 









十 ♦ 

♦僉 翻承參 


没有，这需要多做一点工作。 

画布只是作为一个简单的绘制表面 s 绘制一个形 
状时 T 画布只把它看作是像紊 6 画布并不关心你 
绘制的是什么，也不会记录任何形状。它只是创 
建你要求它创建的像素（如果熟悉图形图像术 
语 “位图 "和“矢绘制，你会发现画布所做 
的就是 w 位图”绘制 ） Q 



如采你想把画布中的矩形看作是一组可以保存的 
对象，甚至还希望移动或管理这些对象，就需要 
在画布上创建形状和路径时维护有关的信息。可 
以把这些数据保存在 JavaScript 对象中 a 例如，如 
果你要跟踪我们在 TweetShirt 画布上绘制的随机的 
M , 就需要保存圆的 x , y 位置、 圆半径 和颜色，以 
便重新创建这个圆 

听上去是个不错的项目。 © 
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抚贺 #们， 伪 tn 成功 7 〖€ 

菩 I 在我的 iPad 上也能正常工作， 
所呔这对子较常出行的®客来说 
痴 电右完義了。 我真兴 *□ 我们 
在开3 -令 Tw 仪 tShlrt 疟劫谁对_ 
■-起来吒。 


Twe ^ tshLrt^J 始人还■钱告诉 d 
祕樣$劣看料 iA 个 web . 在用存喊 
的 [Pd c (和 Lphx 上也錄很碎祕 
ifh 如果缺潢盎, 我们劣然 
也 H 


秀出你 


的玄术 


感 


任騾承 
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回顾 


^^BUUET POINTS 


• 画布是 ™ 个元素，可以放在页面上来创建一 
个绘制空间。 

■ 除非你指定，否则画布没有默认的样式或内 
容（所以在画布上绘制内容或用 CSS 增加边 
框乏前，在页面上是看不到画布 的）。 

■ 页面上可以有多个 画布。 当然，需要为每个 
画布提供一个唯一的 id , 以便使用 JavaScript 
分别访问。 

■ 要指定画布元素的大小，可以使用元素的 
width 和 height 属性。 

-画布上的所有内容都使用 JavaScript 绘制。 

■ 要在画布上绘制，首先需要创建一个上下 
文。目前， 2 D 上下文是唯_的选择，不过 
将来可能还会有其他上下文类型 

■ 要在画布中绘制，需要有一个上下文，因为 
上下文提供了 _个特定的接口（例如，20 
或 3 D ) ^你可以从多种接口中选择来完成 
画布上的绘制 s 

■ 使用上下文厲性和方法来访问画布。 

■ 要在画布中绘制一个矩形，可以使用 
contexLfillRect 方法。这个方法会创建一个 
矩形，并填充指定的颜色。 

_要创建一个矩形轮廊，可以使用 strokeftect 
而不是 fillRecu 

■ 使用 fi N Style 和 strokeStyle 可以改变默认的填 
充和笔划颜色，默认颜色为黑色. 

■ 可以使用 CSS 中同样的格式指定颜色（例 
如， " black " , “#00000 (T I “ rgb (0, 0, 

0)"). 记住要在 fillStyle 值两边加上引号。 

■ 并没有一个 fmCirde 方法。要在画布上绘制 
—个圆，需要绘制一个弧。 

■ 要创建任意的形状或弧，首先需要创建一个 
路径口 


■ 路径是一个不可见的线或形状，它定义了画 
布上的一条线或区域 D 用笔划描出路径或填 
充路径之前，路径是看不到的。 

■ 要创建一个三角形，可以使用 beginPath 创 
建一个路径，然后用 moveTo 和 lineTo 来绘制 
路径。 使用 dosePath 可以连接路径上的两个 

点， 

■ 要绘制一个圆，可以创建一个360°的弧 D 起 
始角为0, 终止角为360°。 

■ 画布中使用弧度来指定角，而不是使用度， 
所以需要从度转换为弧度来指定起始角和终 
止角^ 

_ 360度 = 弧度 & 

■ 要在画布上绘制文本，可以使用 fnrrext 方 
法。 

■ 在画布中绘制文本时，需要使用上下文属性 
指定位置、样式和其他属性， 

-设置一个上下文属 性时， 它会应用到后面的 
所有绘制搡作，直到你再次改变这个属性。 
例如，改变 fil!Style 会影响设置 filiStyte 之后 
绘制的所有形状和文本的颜色。 

■ 可以用 drawlmage 方法向画布增加图像 n 

- 要增加一个图像，首先需要创建一个图像对 
象，并确保它完全加载 e 

■ 在画布上绘制就像在图形程序中完成“位 
图" 绘制。 
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_ 








m, 


-•'： 




经_嫩=^ 首家报道 

抛相同的 


Troy Armstrong 报道 

问询报特约撰蒱人 


能过?_，我 
人？ < Ca n vaTi ^^ 标记背后的女 

P^^Si 雜; ■ 

关系，我们会得到—些 


^ 11 vas>+ < video/ — 
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开动你的大脑 



镇字游珙 

我们迫切希望到下_章看看关于<030\/33>和<\/1(^0>的独 
家报道„同时，先做个小小的填字游戏.还可以来点茶,巩固 I 
你新学的画布知识。 




誠老衆 | 



横向 

4* 画布上的一切都是__ a 

5. 我们将 “and dll 丨 got was this lousy t - shirt !" 文本 
_ 对齐 a 

6. 用一种颜色填充形状时要设置的属性。 

7 -可以使用一个__处理程序指出某个内容何 

9. Jim 尝试用¥创建圆的不存在的上下文方法^ 

12 .要 用一个 _画圆 e 

14. 可以用这种方法让一个形状的路径可见 e 

15. 想知道选择了哪个选项吗？你可能需要这个属性。 

16. 画一个形状时所创建的一个不可见的线 s 


纵向 

1. 放微博最合适的地方。 

2. 这个上下文方法会创建一个矩形。 

3- 画布和__相处得很好。 

8, 圆有360_, 

9. 使用这个方法可以在画布上绘制文: 

川.我们按度考虑，画布按 _考患& 

n. 这个对象包含一些方法和 艉性， 可以用莱如画布 
上完成绘制 & 

13■将路径铅笔移动到点100, 100,可以使用_ 

(TOO, 100); 
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var 

var 

var 

var 

var 

var 

var 

var 

var 


秀出你的艺术天份 


甬为汸的 T 恼奴 



粉演浏 I ! 器 
荅案 ^ 

麻铱 &较有 3|亩，软拧洚隹 
JovaScripf® ^, #S 出务十济 

W 弗 t 聆值^ 


sel«ctObj = document. getElementByld l^backgroundColor") 
index = selectOb j. selectedlndex; 

bgColor = selectObj [indexj .value; wl^Ltc 



selectObj = do cument, ge tS 1 eme ntBy Id { IT s hape"); 
index = selectOb j. selectedlndex; 
shape — selectObj [index] .value; 


slreUs 


selectOb j — document. getElementByidf 11 f oregroundColor' 1 ); 

index » selectOb j. a el e eta d.Ind«x; 

fgColor = selectObj [index] ^value; tola^ 


圬吁莕个某掣选场 ffi , 
我们含饵 fy 包 ta 个 a 场的选 
择尤砉 , Msdcctedi^ds^^fi 

a 选琦的值。 






丈本不同。奋 if , £ 篆的茗宇#丈 0 ■軚 


不 @ 


Select background color: I White 


Circles or squares? Neither : 


Select text color : Black 
Pick a tweet : 



扣票電 曩，苟 g 爲棊 € 
htmu , 畓罨这珐速 场的 

( t . 


Preview 
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练>】 答案 









瑯 


伪代碚祓贴著寡 

利用你的伪代码能力组织下面的伪代码 a 我们需要为 drawSquare 函数编写伪代码，这个函数取一个画 
布 和一个 上下文参数，会在画布上绘制一个大小随机的方块,.以下是我们的答案， 

广_6麟_入 7 & 騾班 

厂 ^ 个法 

function drawSquaLcanvaTl, | conte xtl ){ 

-- 

贿的宽磨 



士 画布由的方块计算一个随机的 y 位置 


将 fillStyle 设置为 "lightblue 


你的磁姑放旮 a 笼 


» 


在 位置〜 y 画一个宽度为 w 的方块 


} 


«|Jbarpen your pencil 

Solution 


为了确保每次点击预览按钮时在画布上只看到新的方块，需要使用用户 
在 " backgroundCotor " 选择菜单中选择的背景色来填充画布的背景。首 
先， 实现一个函数用这个颜色填充画布。请在下面填空 s 完成这个代码^ 
以下是我们的答案^ 


function fillBackgroundColor (canvas , context) { 

var selectObj = documen-t.getElementById( T ， backgroundColor"); 
var index = selectObj + selectfedlndex; 

龙釗瘥一个背署疤，残们 i 敞的鱿 4 铨利 

var bgColor - selectObj .options [index] .value; ^ —个蚝衫用一种敕色域充整个函 

context.fillStyle ^ bgColor ； 

context.f illRect (Q # 0 f canvas .width r canvas .height); 
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粉演浏览器答索 


鞾洚个 arc 方溏饷抨,在®上闺出所有值，包揞洚个方法创诔 
的羚椏。 


context . arc(100, 100, 75 f degreesToRadlans(270) 

然痗 ii ㈣ H 亟紙 ^~_ 从这 








终 it f = o 6 - 


秀出你脏术％ 


. 0, 




true); 




现在 B 经有？路径 f 然后艰？ 

当然要使用这个路径来画线，并用颜色填充你的形状！下面创建一个简单的 HTML5 
页面，其中包含一个画布元素，键入前面的所有代码。再运行试试看 a 


context .beginPath 0; 
context .moveTo (100, 150); 
c oiitex t. 1 IneTo {250, 75); 
context + 1 ineTo {125 f 30); 
context,closePath(); 

cont«xt.lineWidth = 5; 

context. stroke (}; 

context.fi 115tyle % ^red*' 

context. fillQ; 


J 

设 i 錢宽用来 存路柃 _t ® 终。 

■ l!9 rri-r««a-ra-i-ai'B + ai ■ ii ■ a ■■■■■■■ iia-rBiiiBrBFrBa ■_ _n 

用钱接路校 a 

_ B ■ '■ ■ ■■;■ ■■■■■■■■■■•■■ ■■ __ ■_ __ _■ ■ J ■ li. 

设 E 锨 I 來用 Ut 瑀免三免衫 

a ^ ■ fcB*a*a*a*a*B*bd( ■d.td.hd hd + adi^ + g + e + e + i!^ 

用釘 e 鹐充三角衫。 


知栽三背衫否®时.教们食 
作 fiii 个锉菜(栽们釗速5 

300的画 4) , 
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练习答栗 



中垵怵 裊奢寡 


现在发挥你的画弧和路径的技能来创建一个笑脸 a 用 
你霈要的代码在下面填空， 完成这个笑脸 。我们已经 
给出了一些提示，告诉你应该在图中哪里画眼睛1鼻 
子和嘴。 


下面是我们的 答案: 


function drawSmileyFace () { 

v*r canvas — document. getElementByld ( M &m± ley"); 
var cont^ext = canvas. getContext ); 

contexh.beginFathQ ; 

context, arc (300^ 300^ 200, 0, degr^QsTo£l*diams (360) 
context ills tyle = 






true )； 






OjDC, 1^j50 


半柃 


= %oo r 
在子 =50 


~ 3 收 sso 


context, f ill (); 


context stroke (); 


context, beginFath C )； 
context. arc (200 f 250, 
context. strokeQ ; 



25 P 0 f degreesToEadians(360 ), true); 


这晃在猓。 ®<# y 丰 
糾 ％起诒角 終上角 
pt 之舐度 O 仅) 度）。敦们用笔£.1播 
这个踣柃， 来樗封 t 的轮廊 （禾不 ^ 
域充） * 


context, beginPathQ; 
context,. arc (400, 250, 25 t 
context, stroke 0; 


匕 ^ E iif 方南任用了遂 ㈣ 

0 r d«graesTQH«diana(360} r true); 科 ( 不过 ㈣ 子一个完整栌 ® 

來说,方命4不重震) 。 


contex t. be gi nPathO ； 
context, moveTo (300, 300); 
cont^ixtL. lineTo {300 r 150 }; 


这是鼻子。 视⑽ ~n>(30o^soo) ^ % 
# ^ m = SOO , y =300 样 Mil 用 

u^i?>(3oo^} . © 寿轟；在度易邱 n 
后用笔則接 a 个珞柃 D 


context „stroke(); 

context. be gi nFath(); 
contsxt,. az:c (300^ 350, 
content, strode (); 


*3 译 f _) —个更真实的撤笑，敎们 让嘀的 起祐角和终止 
兔分 科如軸 a 说妒起碚免玲 终止译為 

75, degxreesToKadiansCZOtir d©g=e 窃 sToRatdi»ns(1601 , false); 


} 
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为釦泉砥的科( ㈣ ） ■ ©豸戧04智这4-个 
嫌笑着的嗜， mi , 起至旮 喵中心 的右, 
















秀出你的艺术灰份 






代碚祓贴者寡 


这是$ 第一次 尝试画布文本„下面我们给出了 drawText 的部分代码，我们将调用这个方法在 
预览画布上绘制所有文本 e 看看你能不能完成这个代码，在画布上绘制 u lsaw this tweet " 

和 “and all I got was this lousy t - shirt ” ，绘制具体微博的代码以后再 完成。 以下是我们的答 
案 u 


function drawText(canvas f context^ { 

var selectObj = documen t, ge tE 1 eme ntById ( 
var ind&x = s^lectObj. selectedlndex; 
var fgColor = aelect：Okj [index] ,value ； 
co^text. fiXIStyl® I = fgColor; 

'bold lem sans-serif^; 


context, fill Style l : 
context.! f ontrl = ’如 

c □n'text 丄 textAl ign|_ 

con text .j fillTax t 


= ,T l«f t r 


foregroundColor 




.1 saw this tweet 





20, 40) 


接在：这襄 " E tKU 
twe 找 _■ i 本的 x 七沄 1 & 


u 


0酋, 餅 
袅存潼 f 给出 
&繹 f 将乘含 
i 殓入餘 
w 墦缚殳本的 
只体代辟„ 


// Get the seleetied tweet from the tweets men 
// Draw the tweet 




context:.font = >T j bold lent 
context. 


textAlign 


f~rlght^ '■ 


撒博旖用 -v 神斜体 iirLf 
幸体.不过我们#望这个皮本 
僅用相如 字体。 


H 戧们泰4这个盘本故存右下角。 



context. 


BllText Ic^and all X got was this lousy t^ahirt! 

^mmuaLi - 



canvas - height-* 40 




律素的 fd e 蛤争 ) a 个盘本,以馕奂第 
— 行泛本平衝。 


I flUCirde | 


多余的磁鉍。 


| fillRect I 
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练习 



tvi 


IvtiSn 





看看你能不能利用 J udy 给出的代码完成 drawSl rc (函数， drawSird 函数取_个画布和 
上下文参数，在画布上绘制一个小鸟^假设利用这个函数我们将把 "twiTTerBird,png M 
放在 X =20 T y=120 位置上，宽度和髙度都为70 0 我们已经帮你写出了这个方法的声明 
和第一行代码*下面是我们的答案。 



別 S 了袅 ■flprtvE.cwHiai^Ur^ fe 

function drawBird[canvas, context) { 中 ff 加 — 个 draw 私备教？:用用 

var 'twi.'bterBird — new Image 0 ; 

你的代运写存 3 twltterfeL / ct.srCr = ； 

twit±cr^L rd { 

rfra wi v^a g t (twLttcr'feL^ ZH> f mo, yo r yo )； 


}; 



H 丁加厶5镇字游欢奢葬 
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TweetShirt 箕渌节矽脅 



你已:经做出了完美 CfiTweetSIirt 臟 一 现在做什么呢 T 
嗯 S 如果你真的想完成I己的 -T 恤设计 5 邶么&定能 
做到!怎么做呢 T ~E 面西额外泰置一个小小的附加 
题， 你可以 对代妁做些补充，如果 M 意，邛以增加一 
个 TweetShh：t " 复话 tJ 彩蛋” e 根据你的设计创建一个 
圈■像，把它上传到 ，个 能够在 T 恤上打 CR ■图像的阚站_ 
fWetu 上有很多这样的网祐 t 。 



怎么做到这一点呢？很简"单丨我们可以使用 canvas 韩象 
的 loDaiatlRL 方法。如芥： 

痒坩加达个坊觚 .:. 
function_makeImage 0 { 

v^r canvas - = document,.getElemenltByldC T, tshirtCanvas^tr 
canvas .onclick = function () { 

window, location - canvas, toDataUKL ("image/png^ 1 ); 





}； 


flTH 函布对象…… 

增加一 个事辞 赴理炫 _ 

^ _ . ^ , 沽点击凾 4 时， 

它含剖速这个邑嚷， 


転中只苟泛个 gTff , 


我们龙 丰亙 砗舍广速^个 PM 
祕 (4 凾在上铪軔(象秦) 




d t 「 丑 -HU 器碏 一 IptA 
#的■络式 — 

种袼式。 


现在 只需恶 在窗 !~1 onlliad 函数巾增加一个 makeTmage 调用_这样一来 t 
当你点击砰 r 布时就会戗建一个阌像了 D 4以试一成。如策你做出了包 S 的 
T 恤一定要 tfe 我们免 


window,onload =functionr()- { 

v&r button = document, getElementByld^'previewButton 1 ^ ; 
button.onclicK = previewHandler ； 
makelmager(); 

__ 況 用 _ fee f haa gc >6 亙韦嗜加魚击 J 
} #€^ i4o 这 Hi 成 r 你的 a 

^ 0 1. 



Walcli u! 


如果从 file:// 运行代码，有些浏览器不允许你从画布获取图像。 

如果希望这个代码在所有浏览器上都通用， 要从 loc 咖诚//或 
托管服务器运行这个代码， 
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% I- 


不再是父辈的老电视 







以及特邀演员“画布” 


命 





不再需要插件 e 毕盘，视频现在是 HTML 家族的直系成员 6 把0〖(^0> 


元素直接放在页而中，你就能立即看到视颊，而且大多数设备上都能支 
持。不过，视频绝不仅仅是一个元素，它还是一个 JavaScript API, 有 
了它，我们可以控制视频的播放 * 创建自己的定制视频界面，还可以 
用全新的方式集成视频与 HTML 的其余部分。说到集成……还记得我 
们一直在谈论的视频与_布的联系吧一你会看到，视频和画布在一起 
会为我们提供种强有力的新方法来实时地处理视频。这一章我们先在 
页而中玩转视频，然后再来研究 JavaScript API D 来吧，只用一点点标 
记、 JavaScript 、 视频与闽布，结果会让你瞠 II 结舌。 


这是新的一窣 349 
















介绍 web .‘ Uk . ;, 

^zRWebvflle TV 







黍 



Wcbvillc TV, 你想要的所有内容尽在其中， 
比如 ((Destination Earth》 、 ((The Attack of 
the 50’ Woirnm)),《The Thing)),《The 
Blob)) t 不难理解还会有一些 50 年代的教 
育片 a Web 镇上你还能期待些什么呢？不过 , 
这只是内容方而，在技术方而难道你不期待 
HTML5 视颊吗？ 

当然，这只是愿景，如果你希望愿望成真, 
就必须动手来构建 Webvme TV 。 在接下來 
的几页，我们会从头开始，利用 HTML 5 标 
记和 video 元桌》再加一些 JavaScript 来构建 
Wcbvillc TV 。 


用 HTM U 5 技术构遠 
WibvLLU TV fl 




f 专―个理解伐 

的别览器 『 
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先搐定 HTML 鄯分 



嘿，这已经是第8章了 t 所以我们别再浪费时间！直接创建一些 HTML 吧: 

<! d.oc^ype html> — 琢杉金的 * 

<html lang^en 、 


<head> 

<title>Webville TV</title> 

<meta charset= ,,, utf-0 t, > 

<link rel= M stylegheet T, href= 1p webvilletv. css T, > 


6 f i 

去: t 熹 一# 。 


</head> 


<body> 

<div id=j" tv T， > 

<div id =11 tvCon s ole M > 
<div id= 1 'high1ight 1 > 


只东一个 .)，® 像，妖铛让它 f 起 
瘃律基一个虡圧的电疣 


\多 


<img 3rc* ,r images/bighlight.png M alwhighlight for tv M > 


</div> 

<div i d* T, vide oDiv M > 


不再 t 老电视 



任麒 



<video controls autoplay sr 11 video/pxerol 1,mp4 T, width= ， , 480 it height= M 360 T, 
poster= ,, images/prerollposter.jpg ,t id- ,T video ,f > 


</v r ideo> 

</div> 

</div> 

</div> 


i 这 4 用床讓放視#的.走 

素。狱后金更铒鉍地介绍…… 


</body> 

</html> 

播上电视 , 试一试 …… 

这里需要明确几件 事怙： 首先，要确保 上而的 代吗都 
已经键人到一个名为 webvilletv . html 的文件中 i 
其次，要确保已经下载 rcss 文件，最后，还要确保 
下载了视频文件，并把它们放在一个名为 video 的目 
录中 a 如果以上都做到了，加载这个页面，坐下来好 
好欣赏吧。 


这袅我们希 f ) 的。 

釦蓽把鼠林磚4属蓐 I ： . 
舍出现 一 诹控件,可以用 

视#,还巧以设 Sf 喊 
我老4视頻中搜索。 


4 _ 孖下一页！ 




斯荀尚容可 W ^lnttp ： //wLc-k^^lyst^flrt^om/hfVitm,LS'T c 
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_ 格式可能带来问题 


节别％ BI ： ㈣ 拿， ^ 
疒迁的支神、 
v/ t , 如菜 沩的视 
喊秸正常工忾■邱 
WU — 宠龙的 
列兵沒 wfcb . 这个 i 
蛭 0 fi 不的演进. 
f 11 稱它的藁鼾 
ii % ：! 杖后 ap 还 
古 ® 瘃 (5 —哆# 论 
达个 i 蛀 。 





鉍毒衆 | 





我进# S 『1 任钶裉頻哬 e 我应 
I [棺金3代筠 . ^Bmmtn 
也敖在正搛的&彔 t ? & 怎么诨 
1 一 v 單被？ 广 


♦铉麒在 


嗯，可能是视频格式的缘故。 


尽管浏览器制造商对 HTML 5 中的 < video > 元素和 API 达 
成了一致，但是井非所有人对于视频文件本身的 
格式都意见相合。例如，如果你使用的是 Safari , 可能 
倾向干 H . 264 格式。如果你的浏览器是 Chmme t 首选格 
式则是 WebM , 诸如此类^ 


在我们刚才写的代码中，我们假设格式是 H . 264 , 这 
在 Safari Mobile Safari 和 1 E 9 + 中是可以的 e 如果你 
在使用艽他浏览器，可以査看你的 video 目录 T 会看 
到不同类型的视频，分别有 3 种不同的文件扩 展名： 
•■ mp 4 ” 、 ' ogv " 和 ' webm ” （稍后就会介绍这些扩 
展名的含义）。 


对于 Safari , 应该使用 . mp 4 (包含 H 」 264 ) D 

对千 Google Chrome t 则应使用 . webm 格式，要把 src 属 
性#换为： ^ 


如果你在使用 Firefox 或 Opera * 就要把 src 属性替 换为： 

grc= ,T video/preroll. ogv M 

如果你使用的是 IE8 或更早版本，那你太不走运了 。要 
知 S, 这已经是第8章了！你怎么还能使用 IE8 或更早 
版本呢？赶快升级！不过，如果想知道如何为你的 IE8 
用户提供备用内容，別着急 T 我们会谈 到的。 


物会梅明/ 


src="video/preiroll .webnt" 
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不再 老电视 


video 矣素如愈 X 作？ 


mi 


:现在你巧经在取:同^^庭卞^乎:视麵二但是在继故幸习:后面-的内舍乏前^先退 
— _ 歩厂看著棒记申使用的这企说的 元素厂 二■ :: ; :. 


扣系"筘 d 个 Cr & btircjLs ■漢沒 f 播兹 器金越 供 
A 碑用户坨料涨祿和老爽的泳故。 







<video controls 

■*- • I .■- - . . . ■ 

...••■ ■■ I ir >vi'__% p. "ii" a v__-'___■ ws s_vm ..sv. - - 4 f • i . - ■ i 

autoplay 

■ g ' 

src= ,T video/pre roll , mp 4 u 
width = 1 J 480 M height = n 360 ,f 


: 釦某有 Hi ®- ...._, 
…钱料麟-故: ' ■■… 


tz 


tz 


座頻的泜 fiE 。 - 
——贡省中棵稍的宽塵和姜度 & 


</video> 


poster== u ±mages/prerollposter*jpg f, - 

id;" vid ： 0o ri > —^"~"~ 不嫌沒辛 H 时 $ 承的 洛跑 © 坪 ,, 

在以刊用这个 u 认 _ 

以网 a 个龙豪 a 



的—另-一个笮用的技巧。 


伽 HTMLS Cmde 
Cons true tio 

y HI 


nstracticm 

C « i\y «jf Wrbvi . lic ： 



视频礼仪 r 

autoplay 属性 " 

autop 丨 ay 对于 YouTube 和 Vimeo 之类 
的网站（或者 WebvilleTV ) 可能再 
合适不过3，不过在 < video > 标记中 
设置汰个厲性前销三思。通常，甩 
户希望能够参与决定是否在加载页 
面时就播放视频。 -- 


铝现在轨梪 M 
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视频餚朽概览 


深入研窕视频厲性 


下面更深入地分析 video 元素中一些比较重要的属性 


somtrois 

coimoh 厲性是一个布尔属性。 
可以有，也可以役有。如果有 
这个厲性，浏览器就会为视巧 
显示区增加内茛控件 D 不同^ 
览器提供的控件会有所不同 J 冗 
以请査看各个浏览器，广解 
不同浏览器的控件具体是怎样 
的。 Safari 浏览器中的控件如匕 



mm r— 

.■ .嫌 J 


src 属性类似干 <img> 元素的 sre 属性 — 这是〜个 
喊冑制_査醜文化在这里， 
Uf ：$ Vlde 0/ prer 0 iLm P 4 。 （如果已经下载这一 

在 videG 目录巾齡财醜以及 


antoplay 

autoplay 布尔厲性告拆浏览器：一旦有了 
足够的数据就开始播放视频 a 你可能会看 
到，我们的演示视顿几乎立即开始播放 a 


f 视#旛故器 


L 


poster 

浏览器通常会显示一个视频帧作为“海报 M 
图片來表示这个视颊 s 如果刪除了 auioplay 
栻性， 点击播放之前就会看到显示这个图片。 
要由浏览器来选择显示哪帧，通常浏览器 
都会显示视频的第一帧……这往往是黑屏 * 
如果想显示一个特定的图片，就要由你来创 
辻一个要显示的图片，并使用 pusierM 性指定 
这个围片。 


preload 


布尔属性 prdoad 通常用来细粒度地控制 
如何加栽视频来实现 优化， 太多数情况 
下，浏览器会根据一些因素来选择加载多 
少视频，比 如是范 设置了 autoplay »另外 
用户的带宽是多少„可以羝盖这个设置， 
把 preload 设置为 none (在用户选择"播 
放”之前不下载任何视频），或者设 W 
为 metadata (只下载视频元数据，而不 T 
栽视频内容），还可以设置为 aiiuj , 让浏 
览器来做决定。 


width height 

width 和 heightMf 设置视颊显示区（也称为“视窗”）的宽度 
高度 ■> 如果指定了一个 posterM 性，海报固片就会缩放为你指 
定的这个宽度和高度。视颊也会缩放，不过仍保留原来的宽髙 
^ (例如，4:3或 16:9) ， 所以，如果两边或者上下苞多余的空 
f 自 h 视频会采用上卜加黑边的模式 （ Letter - boxed ) 或左右加黑边 
的換 _ ( Pillar - boxed ) 来适应显示区大小。如果想得到最佳性 

能*就应该采用视频的原始大小（这样浏览器就不必实时地缩放 
视频了>。 


r 


loop 

这也是一个布尔属性， l oop 厲性会使视颊播 
放结束后自动地重新开始。 


Vii\AY-boK 
( 在右加 M(i) 






L - Cttfir-bsyt 
C-t 下加1这) 
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罨个 浏尨 a 理供的按件麝 
上去铮不一样 I 如菜采用 
Flash 之*的藓决方®，起码 
我玎呔潘利外硪一致的拉 


不 


A % I - C A 

再， . ：;老电视 




^Ji 

、任郵承命. 



是的,每个浏览器中 HTML 视频的控件 
确实不同„ 

控件的外观由实现浏览器的人决定在 
+同的浏览器和不间的操作系统上，这 
些控件看 上太确 实各不相同。有些 M 况 
下，例如在小平板设备 L , 它们的外观和 
表现就会不同，因为这些设备的工作* 
式就不同（好在这个问题已经替你考虑 
到 O 。这个道理我们明臼，比如说在 
各种桌而浏览器上,能有一致的控汁是 
一件 好事， 伹是这并不算 HTML 5 规范中 
TE 式的部分，而且有些情况 F , 可能某 
个方法对一种操怍系统适用，在面对另 
一个操作系统的用户界面原则时却会完 
全失效。所以，要知道控件可能会不同， 
另外如果你确实觉得有必要，也可以为 
你的应用实现定制 控件。 


tL 忘奄鱿令达缉敗 • 
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视频格式 




龟 i 




令 


兵子视频格式 f 要知通什么 

我们真希望一切都像 video 元桌 及其 M 性那样十净整 
洁，可惜实上 Web 上的视频格式相当混乱。视频格 
式是什么？可以这样来考虑：-个视频文件包含两部 
分，一个视频部分和一个音频部分，每个部分都使用 
一种特定的编码类型来编码（这样可以缩小数据大小， 


i 戋洌贫 器璉用 的3神; f . 
同柷赖格式。 








|锎 





这3& — 个容思… 



Theora 视频_码 


等仂读 f _) 这本韦的 ,1 你 t 姊科的 
饋况刁钱食有錡不疾 L ©錡笼行 
的铋砝#種含哦 H 问 -4 化， 


格式名相一个容器炎螌（如 
WsbM , MP 4 和 003) 以边一个视 
頻编砝和一个舍0铖媒(釦 Vpe 和 
wbU ) 。 


并能更髙效地播放）。大多数情况下，没有_种得 
到大家共识的编码，有些浏览器制造商 推崇見 264编 
码，另外一些却喜欢 VP8, 还有一些倾向干开源编码 
Theora, 而 R, 包含视颊和音频编码的文件 （称 为容 
器）也有_己的格式和格式名，这让情况更为 复杂。 
所以我们面对的典像是一个混杂口味的“术语汤”。 

不管怎样，如果所有浏览器制造商都能达成一致，在 
Web 上使用冋一种格式，这当然是一个让人欢欣鼓舞 
的大同世界，不过，嗯*出于技术上、政治上甚至哲 
学方面的一些原因，这是不现实的 9 但这里并不打算 
就此展开争论，我彳 N 只是希望你对这个主题有足够的 
了解，对于如何支持你的观众能够做出自己的决定， 

下曲来看目前流行的一些编码，现在主要有3个竞争 
对手在努力征服这个 （Web) 世:界…… 


……色含视 
姨數对的一 
个视秭鵷從 
和一个眘頻 


HT；VU^5 琪范允钤弟芹任何执频柃式 0 具仿夹 
特卿些柃式由湃赏標实现来碲糞 。 
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責争选手 

事实上，如果你打算为范围更广的用户提供内容，就不能只提供一神格式。 
另一方面。如果你只关心 （比 如说） Apple iPad, 那么只支持一种格式也是可 
以的 D 如今我们有3个主要的竞争对手，我们来^——认识一下： 


不再1父蜚：老电视 





MW 睿#,包言 
H .264 视頻和 MC 眘頻 

H .264 由 MPEG，LA 公司授权。 

目前有多种 H .264, 每一种分别称为^ 
个 “ profile ” （等级或类）。 

MP 4/ H .264 得到了 Safari 和庀9+的支持。 
_些版本的 Chrome 也提供了支持 a 


WebM 容 S . 包宮 
VPS 视頻和 Vorbis 咅頻 

WebM 由 Google 设计用来处理 VP 8 编 
码视频。 

WebM / VP 8 得到了 Firefox 、 Chrome 和 
Opera 的支 

WebM 格式的视频扩展名为 webm 。 


Th 抑 ra 视頻和 Vorbts 眘頻 

Theora 是一个开源编解码器。 

采用 Theora 编码的视颊通常包含在 
◦ gg 文件中，文件扩展名为 . ogv 。 

Ogg/Theora 得到了 Firefox、Chrome 
和 Opera 的支持 e 

p ,f- 朽 _ ■ ■ * 


VPS r 的逢孕 r 也 

^1-3 3 it 他公苟的主气舞 



_ 


你现在的位贾 ► 
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管理视 n... 

如何处理箝有这些梏式…… 

现在我们知道 r, 谈到视频格式，这真是一个混乱的世界，不过该怎么 办呢？ 取 决于你 
的观众.你可能决定只提供某一种视颊格式，也可能提供多种。不论哪一种情况 T 可以 
在<^41此>元紊中対1应每种格式使 lf <SOUrce> 元素 f 不要与 ijm 厲忡混淆这样就 

能提供一组视频’每个视颊分别有自 e 的格式 T 可以:让浏览器选择它支持的第一种格 
式。如下： 


^1. 




e o 





♦任 麒承 



•冉聿加了 3 个岛也 
3个铦记冇亡 3的的屢性分 
則也會采用不同格式的视 錄〜 
坂冬 3 


- - i 主盎残们从 记射徐 

{ 

<video sic- 11 video/preroilid="video ,T 

poster^ ,f video/pr«rollpost^r»jpg T， corvtrors 
width= T, 480 M heights ,, 360 ,, > 

<source s rc= n video/preroll, mp4"> 

< s ouarce s rc= M video/pre rol l, webm ir > 

<source src= M vitieo/preroll ： .ogv"> 

<p>Sorry f your browsei: doesn' t support the video element</p> 
</video> 气 




和栗浒错器不 t 
頻，.妖会$_ 


珂 ㈣ 认 i 允下 n . ㈣ 找 

1 

封子备个 scu ^ rtc 尤录，.闲羝器金加栽视 ■ 喊又株的; i 盘 
魏来奢 着能; r 被黍放 ci 个砹痒个过沒刁辟喂軚 
费的两, 不 d 疚幻 v 以在 浏贫蕤1•更餞松池軚约 
i 责鼉下:一资> e 


BUILEI POINTS — -- — 

- ，- : -_ - " 

_« ..容器是用来包装视频、音频和元数据信息的文件格式^:常甩的 
" 容器格式 包括； MP 4 , WebM T Ogg 和 FbshVideo 。 

■: p 编解码器是用来对一种特定视频或音频编码进行编码和解码的 
二较 件； 流行的 web 编解码器 : &括 : H ； 2 ^ ： Jhet>rarAAC . 

和 Votbis — 

«要由浏览器决定可以解码哪神格式的视频 T 不过并不是报有浏 
•览器制造商都达成 b 致，所以如果你想-支持所有视频，就需 
要多种编码：； 、二 
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如何更具体 M 指定视频梏式 

可以告诉浏览器视频源文件的位置，使它能在不同版本中做出选择。不 
过，浏览器真正确定一个文件是否可以播放之前，还需要做一些检测工 
作。 你可以为浏览器提供更多帮助，给出有关视频文件的 MIME 类型和编 
解码器（可选）的更多信息 9 



中 fl 闲的亡 碑宕释 I Afi 体捣赖 
(扣眘頻以层 一# 尤數荈）的容器 


如办沾参盘相.定仔用唧个铀踔 il 器棵頻键解砝器 
爿稞#和音 蝴鹐炫 a 来釗逮 缟紱的 f 
戍頻 Jt 4 , r / 普#瑀磘砝 P : 

I 


<sourqe arc- M video/prerol 1. ogv r ， type= T video/ogg; codecs= u theora, vorbis™> 

" ""一 气 , 


-个可洼澤乜，泛是砀刮览 
器 M 供的一个极在,輝鲂 t 4 走餘 
不敍播 廷运神 袭变的 女件 


ii 4 视喊亡 4的 MiMe 
歩兑雅宠 3 窖赛络式。 


:主砉 endecs 誊盘约农#考 。 这说明 Ufpe 屬伐 
薄迖電 M 迻用荦 A 咢。 


町以更新<3011『(：0元 H 让它包含我们的3种视频的类型信息，如 |V: 


<video ±d="video" pos te r= n vi deo/prtro 1 Iposte r opg" controls width= M 480 >, height="360 T, > 
<source src^'video/preroll.mp4 ,f type= 1 video/mp4; codecs=" 1 ave 1.42E0IE, mp4a.40.2"'> 
<source src="video/pr6roll .webm" type= f video/webm; codecs= M vp8, vorbis™> ( 

<source sr c="vide o/pr« rol I, o g v M type - r video/ogg; co de cs= T, the ora, vorbis ,M > 
<p>Sorry, your browser doesn’t support the video elem©nt</p> 

</video> 

f 

如屎不知法如汆仏參數，司以省略, 只使用 

a 迖样技车含级一点 • 不 过大多 
數悚况下布戧接憂。 


他] ^的铽 解茲器 比系外 萍种 t 光 灰杂， 

特多种 ■■考 级— T 趔尥； r 阕使用 饋况 （如杰芾宽和他 
辛寃） 令奄不罔的编0。 蝌以， 塞想1.議使 m t 兔签 
3 薛如问轲槐喊边砝的曼多贫辛， 


如果你想完成0己的视颊编码，就要对 source 元素屮 type 参数使用 
的各种选择有更多了解 0 可以在 http :// wik:i » whatwg . org/wi ki / 
Video type _ parameters 得到有关 type 参数的更多信息。 


你现在的位置 ► 
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关子： 3 编码和播 t 的问题 


问： 


tiiereiAre ri9 

Dumb Questions 


以后几年有没有希望协定一种 
容器格式或者编解码器类型？我们之 
所以建立标准不就是为了这个目的吗？ 


答 


可能不会很快有这样一种能够全 
盘统治的编码，正像我们前面所说的， 
这个主題夹杂着很多问题，各家公司 
都想在视频领域掌控自己的命运，另外 
还涉及拫多复杂的知识产权方面的问 
题， HTML 5 标准委适会意识到了这一 
点,决定不在 HTML 5 规范中指定视频 
格式，所以尽管从理论上讲 HTML 5 支 
持（或者直少火识）所有格式，担实际 
上要由刮制造商来决定支持什么和 
不支持什么 D 

如果视频对你来说很重要， 一定 要关注 
这个主題。在接下来的几年至，能够看 
着情况逐渐明朗，这肯定是一件有趣的 
H 而立，与往常一样，一定要记住 
你的用户需要軎什么，另外一定要竭尽 
所能地提供支持。 


槎供了 Web 视頻编码的功能^如果你 
想用 Fina〗Qit Pro 或 Adobe FYemiere 做 
一些真正的视频处理工作，这些软件裎 
序提供了它们自已的生产工具„最后， 
如果你从一个内客分发 H 络 (Content 
Delivery Network , CDN ) 分发你的视 
頻，会有很多 CDN 公司提供编码服务 a 
所以你可以根据你的需要在众多方案中 
做出选择。 


问: 


我能全屏播放我的视频吗？我很 
奇怪 API 中居然没有这样的一个属性 s 


答: 


这个功能还没有得到标准化、不 
过如果在 Web 上搜索，你能找到很多方 
法可以在一些浏览豉上做到这一点。有 
些測览器提供了一个全朞控忤（例如 T 
平板设备），这就为 video 元素提供了 
这个功能，另外要记住,如果想办法 
实现了全尋，除了基本的楢放外，你对 
视频所能做的处理可能会出于安全原 
因受到 f 艮制（当前的榼件视频方案也存 


问：如果我想对我自己的视频编码, 
从哪里开始呢？ 

V - U 前有很多视频采集和编码程序， 
选择啷一个取决于你在采集哪神视頬, 
另外还要看你希望釦何使用最终结果。 
有很多书整本介绍视频编码，所以你 
要做好准备，接下来会进入一个滿是 
新的编略谱和术语的世界 t 可以先从 
简单的开始，使用类似 jMovie 或 Adobe 
Premiere Elements 等租序 ， 这些程序 


在同样的问題 ） B 


问： 视频的音置呢？我能用来控 
制音董级别吗？ 


^ - 当绂能 q 可以把 volume 属性设 
置为一个介于 0.0 (静音）~1.0 (最强 
音} 之间的一个浮 点值， 任何时间都 
可以用你的视频对象设置这个属性： 

video* volume = 0.9; 
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下一项任务 
视频侦察 


TOP SFXlUiT 


纖 ㈣ 上 》-:-. 






挪 

3U4 




A, 
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支持 i. ; A Jl - 





毒歡 I 


没问题 u 

如果你喜欢的技术（不饱是 HTML , FUsh 或 
是 其他） 没有得到支持，还有一些技术可以 
作为退路，叮以采用另一种视频播放器 6 

下而你会看到一个例子，假设浏览器不知道如 
何播放 HTML 5 视频，这电将展示如何插入你 
的 Hash 视频作为 HTML 5 视频的一个退路。显 
然，这是一个发展迅猛的领域，所以 定要 
关注 Web (网上的更新要比书上的更新频繁得 
多），要保证你使用的是最新、戢棒的技术。 
如果你更喜欢 Hash 视颊，可能还会发现很多 
方法可以把 HTMLM 乍为后路， rfii 不是 F 〗 ash Q 

<vid«o p o ster= M vide<^. jpg 1 ' controls> 


<source arc—"video*mp 4 T， > 
<source src="video .webm n > 


<sQurc« 3^0=''video. ogv TP > 

<object>.. .</ob56Ct> 

</videa> 4" 无牽中拣入 <A>t> ； t ： l n 釦 

K ■•一碾珂铯器 不邮<疏。> At , 轼含馑用 
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我咁说有 API 

可以看到，用标记和 <video>;^ 桌可以做很多事情。不 
过， <vide 0 > 元素还提供了一个丰富的 APU 可以用來实 
现各种有趣的视颊行为和体验。下面村你可能感兴趣的 
<vid e 0 >x 素方法、属性和車件做…个简短的总结 （详 
细列表请参见规 k) : ' 



使用达些厲性 

videoWldtK loop 


videoHeighf muted 




不再 j 老电视 


调用这些方法 


p,ay 

pause — 
load 


加載视麻 


cawPlayType 


法过编 a 筚助你确 
安旙放 鏵些浼 
賴类型。 




currentTiwc 

duration 

ended 

error 


paused 

readyStatc 

seekm § 

volume 



昼耜差 < v ^ co > X 縈的象的 
H ^ ^ V/ {J 1 (如 和 

^ ttd ) ; 苟墊差的（釦 
ourrii^lin^jtv-trror) ,. 


/ 捕获这些事件 



( it 以让理的華传.如 I 
听的奉辩时軚食谪用徇运的 搴件 


play 

abort 

pause 

watting 

progress 

loadeddata 

error 

loadedwetadata 

fimeupdafe 

voEumechange 

ended 



带现茌的位篮> 
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播放列 I 如何工作 

WebvHleTV 的一令小沟容 “ 计划 ” 

到目前为止，我们只是在 Wcbvine tv 上运行 r— 个视颊。我们真正想要的是一 
个节 g 时间表 T 来作为视频播放列表 D 我们希望在 WebvnieTV h 做到: 




A 向观众显示一个小预告片，你慊的， 
¥比如可乐和爆米花广告，观众须知 
等…… 


显示我们的第一部正片 ， ((Are you 
W Popular )) t 相信我们，你肯定会喜 
欢的 



o 然后展示我们的特色影片 
{{Destination Earth )) T 全彩放映，由 
American Petroleum In st itute 出品， 
他们到底会留下什么消息？仔细看, 
请找出来。 


harpen your pencil _______ 

歡 现在你可能想看看 < video > 标记规范来了解如何指定一个播放列表，不过要实现这一点，你 
需要编写代巧，因为 < vid e£ >> 元素只允许指定一个视频。如果你孤立无援，只能用浏览 
器、 < video > 元素、 src 属性, load 和 play 方法，以及 ended 亊件实现一个播放列表，你将如何实 
现（可以使用你喜欢的任何乜 vaScript 数据类型）： 


摄令: —个视赖龙结来冉磚止旙歿 ㈣ 妖含运生 dokd 奉烏其 
沾拳辞 一祥 r 岌法这个事件的角一个搴_处運杈存。 

光别偷着菩 f i 
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不再 w 父架的 老电视 

令 — 



「pen your pencil —一 _ 

^ Sofution 现在你可能想看看《设 0 >标记:规 范来- 了解如何指定 一 个播放列表，不_过要 


实现这 一点^ 你需 要編写 代码,西为 < vj ( Teo > S 柰只允许指定 rr 个轫频你女 


W 


二京工果你孤立无援，_用浏览器; ^ ide 於元索性^ 

- 1 ■ ■ ■' 一 - —— - 一 2 " ~ ■"■ ■—■一 ■ Z —'■■■_ ■■ _. •- _•_•»_，—■ — •■■__• f — _，— _ ■■: — 1 f ■ ■ 一 jw 「 ■ _ 1 . ■ — _ —— 一 r^-m ■ • "' 1 ■' ■• i _ fc.~s ■‘ J _■ ■- ，■一 

j 夜 性实现#个播.敢到祠 w -苛汉捕两 嚴 
(軚陶盘:福 ㈤ 1 峨搪#型)？卞_出莪扪的咎: - . ::士 w 

.--? fl r 开诒#兹第一个视# f .4 遑垚- _ - … 

- d 漆件处疼枝瘩在达个视賴旙放， -"-•-•• - —•' -^： r .— 丄:“ - - ： -^ 7 

璉 _ 魏 ^ "" ' 一 ” _ ---..- … 


嬙放列表伪代码 


创建 playlist 视频数组 
从 DOM 得到 video 
为 video 的 "ended " 事件建立事件处理程序 


创建变 ■position = 0 

将 video 源设置为 playlist 数组中 0 位 M 上的 
视频 

播放这个视频 


-巧滅们含这蟫存放播故时裊- 
存镍蛤一个廬徂。 I 个 if 
袅一个摩碡故的视我。 ：-- 





.穸 


/ / 


/ 


/ 




苫次 。 个视喊绍衆播 
H r 就畲出现 
事件…■•一 



Playlist 数组 


达羞41瑗現喊貧彔搴珥的让琿炫 


■ - - ■, - _■•■■.■■ - •'職 

tf#o 


EMed 蓽件处蠖程序伪代碣 


将 position 增 1 

设置 video 为 playlist 下一个位置上的 
视频 

播放下一个视频 


-V 


;:1_}迖#放 f ) 表末4 
傅止/也孓以#祐 
IT ■呀去 摻诠第 一个观.禅 


你您在的泣罱 ► 
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实现忠 


实现 Webvnie TV 的旙放列表 

现在我们要使用 JavaScript 和视频 API 来实现 Webvme TV 播放列表。下面 
光在 webv〖lleiv.htmi 中增加一个链接，指向一个 JavaScript 文件，只需要 
把它增加到<1^3(^>元 素中： 

<script src=” webviIletv*j s ,f ></script> 

从现在 的<乂1(^0>元 素中删除以下代码： 




^ # 
♦往齟承參 


<video controls autoplay src- 11 video/prerollup4 JJL width=_ t 480_ t height= M 360 li 

poster= !1 iroages/preroilposter,jpg' T id=' r vidao^> J 从 <vdeO 砝记 . 制轸 aw ±£?pl^ 

</video ^ 和 src 枭行 0 

E . f 刑除伪 9 戧 t 试 ft 加的辦有 
^ it. a 


现在，创建一个新文件 webvilletv.js, 定义一些全局变暈，再定义页面 
完全加载时要调用的一个函数： 


var position 
var playlist ； 
var video; 


0; 


苜先 T 宠义一个变 I 宋记 录我们吞蟋放 啷个®翱，将这个变 
" -f 命名絝* positLojA ^ 


另外#屦_个变 f 侈存戍賴播放糾袅教闼 
汪龙有—个变 | 係得必妨太索的幻用。 


window.onload - function 0 { it 立苟艺个现喊的冰赶別表。 

playlist — [ T， vi deo/pre roll, mp4 M , 

M vid© o/ar eyoupopul ar.mp4" f 
T, video/de s t In at:ionaa r th . mp4"J; 
video = do cumeni_.ge'tElement:Byld{ M video 17 ); ~" . 获较心无 ,.. 

video. addEventLiatener ( ,r 0 nded ,T , nextVidea^ false); 

t 蛑视姨律加一个处理的，这#起来島我们以 # 的傲 4 不同，先到赛 
%, 下一芮全的论这个尚窖。 

video.src = pl a yli S t[position]; ^ 现在为弟一个视 ^ ^心 

video. load{); ^ 

video . playQ ; 加栽 ( i 个视 C , 挺居# 放， 

\ 
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第 S 章 





事件处理程序代码怎么 锣事？ 

以往我们总是把出现一个事件时要调用的处理函数陚给一个厲性 Qp onl oad 或 
onclick ) ,如下所示 i 

video , onended = nextVideo; 


不再 老电视 




不过，这一次我们的做法有点不一样。为什么呢？因为在写这本书时，对视频对 
象所有事件属性的支持还有一些问题。不过没关系，正是由 f 存在这个缺陷，我 
们才有机会向你展示另一种注册事件的方法： addFventListener , 这是很多对象都 
支持的一个通用方法，可以用来注册不同事件，具体做法是这样的： 


沾来坩加一个搴 H 展攀碑 盔生 ㈣ 杩霉试 用钓备 

^ video . addEventliistener { "ended" , nextVideo f false); 

哉 nt 在这个句蒺 i ： ■益 1 

嶒事件。 这暮裁 $ 裝，的亊件。 H 44 專件名箱 第 三个参 數釦果 HE 妁 trut , 它舍控制孩馭攀#的一墊 

气& ’抓， 易级方 .:| D 徐 n ® 龙镐葛#级 rt 铎.否則一投部将这 
嫂存'不阌 U ^ oad ) , 个参盘设作 


与直接将属性设置为一个函数来增加处理程序相比， addEventListener 方法 
要复杂些， 不过， 除此以外，它的做法是一样的。下面再来看我们的代码！ 


如何编茸“视频结東”处理程序 

现在只需耍为视频的饥也」事件编写处理程 rK 只要视频播放器到达当前视频 〆 
文件的未尾时就会调用这个处理程序。我们可以如下编写这个 rl e ^^ tVide 0 函 
数 （耍 把它增加到 webvilletv . js ) ; 

function nextVideo() { 厂右光 “ 将 pU 屮 Ut 教闼 中的 ㈣ h 挪增、 

po 0 ition ++； JL 


-; i 砉，釦梁用户祭涔襪喊或 
老釦集视频缚坏播故 (3 以 
谩 iu 叩羼行皋戤 . 就; r . 
舍遇 用这个 灶瑾萏辟。 


if (position playlist. length) 
position - 0; 


如果的 d 播放利表的末屢, E 
^)0, 異牦坏 W 约..法故朽表的第一个视踌 a 


video T src = playlist [poait ion]; 
video. load(); 
video.playC); 


< f - 现存揭旙汝器的视喊* 设1 
>6 下一个视頻 ；■ 


最后 ，加栽视頻 r 孖诘銹 
沒这个新视# t 
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测试匕 


再采试一试 • 



你能扣信吗？我们居然 B 经可以武一忒了 ！莪们所做 
的无非是使用 API 设置-乍要播放的视频，然后准 备一 
个事件监听程序来处理_视频纺束时的情?史，它会撒放. 

播放列表 中的下 一个视獲。确保浒 HTMO： 文件完成以- 
上修改，-键人新的 JavaScript 代码，下面来试一试 . 








使用多个 srnjrce 标记时，我们可以依赖浏览器枪查一个 
或 多个视频格式，井确定是否可以播放 K 中一种格式。 
既然我们在使明代码，就只为 WtfcoTC 素提供 f 一个选 
择。如碎査肴»览器支持哪神格式來确保我们提供_ 
了最佳 的格式呢？ 

婁做齒这一点V岢 tu 使甩视解財象的 canPiayType 方 
法。 canPlayType 取一个视频格式为参数》它会返回一个 
字符弟_表示抛览器对于播放这种类增的视频有多大的 
佶心 s 共有 3 个倍心等级：很昨能 Cprobably) ,可能 
(maybe) ■或毫无信心。 I® 将深人分析，然后会修改播 
放 列表 代码来使用这个 方故。 % 


行 .^.7 ■蓬4绕 A . 44 1 译 __蜋9 餘？ ^ U -7 

恤咖 ，- 哉们也节 苟踔 的疑问 ， 不过轉后4,$#辞这！化么意思.… ■ 


问得好 
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4-;i 招榷是 ■^ 用播放头在片仪或年列中移动 . 楗榷用 . 于余找特定的点或 . 怕， 戋者呢女贫 . 







不再建父辈的老电视 


ca wPlayTy pe 方法如何工作 

视频对象提供了一个方法 canPlayType ， 它能确定你能播放一个视频 
格式的可能性。。311?1&：^¥9©方法取<30；13：0&>标记中使用的同样的格 
式描述，返回以 F 三个值之一：空串、 “ maybe ” 或 “ probably ” 。 可以 
如下设 3 用 canPlayType : 

如果刑链器知道*法拣放这 
个视#,則碎 t 專。 

扣粱澍 i 器认婷 达奄巧 蚝棬枝 a 
个現#, ♦ 進瓦 ' Wflybe " 0 


不 Ci F 如乘 M 入带鲢芻砝.器的 只体类 f H 妖巧毹得到… * "Wflubft 
或 J y ^ b « bLy r ， 作碎谷 f 。 


^釦屎到诺器很冇 flu , ^ 
秸够操放这个视痛 ， 杖金运 
史聲 " prc^nbLy M D 


注惫只有 3 类型中包含 Tcodec 参数时浏览器 I 会有比 “ maybe ” 更大的佶心。另 
外要注意，这黾没有 " 我完全确信”之类的返回值。即使浏览器知道它能播放某 


种类型的视颊，仍不能完全保证能够播放具体的 视频， 例如，如果视频的比特率_ 率盈 ㈣ 
( bitrate ) i ±*, 那么浏览器就可能无法对它解码。 


如果只传入一个短钐式的裕式.只芍秸得 f _) 
或 r rt 為蛣果。 

video . canPlayType { u video / ogg ,f J 


video . canPlayType (' video / ogg ； codecs-"theora r vorbis 



一— 


爯体使阁 canPlayType 


我们要使用 canPlayType 来确定 Webvilk TV 视频使用哪种视频格式 e 你已 
经知道每个文件有3个 版本： MP 4. WebM 和 Ogg , 取决于你使用哪个浏览 
器，有些格式可用，有些则不行。下面来创建-个新函数，它会返回适用于 
你的浏览器的文件扩展名 （' mp 4" v ' webm " 或 ' og /) 。我们只使用 T 
MIME 类型 （ t * video / mp 4 t， , " Video / webm ” 和 kl video / ogg w ) ， 而没有 
提供编解码器，所以可能的返回值只有 H maybe " 和空串。代码如 F : 


function getFormatExtension {) { 

if ( video . canPlayType ( T , video / mp 4 ") 




栽们知龙只 g 秸得 托誉華 ^ flybe ^ 
含得到一个空 $ Q 


return ". rap 4 M ; 

} else if ( video . canPlayType ( r , video / webm ") 
return , T . webm f, ; 





} else if < video , canPlayType{ M video/ogg 1 f ) t = mt ) { ^ 

return ".ogv ■” 

) \ 丈多教悚况 T , 也莱不 知湩鹐鞟铒器 

軚 6 绞足移耔了。 * 


當试备种类变、 如菜到 M 器表 
矛 '我9敍 t 持这神类螌〜.軚 
迫 w 相疰的生衅护暴名., 


秸 
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再来处理： 

集成 getForwatExtension 凾数 

现在，我们需要对〜1]^01^-0「1103(^和116乂亡 1 ^：5_^160函数做一哇修改来使 
用 getFormatExtensioiu 首先，从播放列表中的文件名删除扩展名 
(因为我们将来确定文件的扩展名），然后 
在设罝 video . 51：0属性时调用非1?01：[1^七£乂亡6：113：1011 : 



碑# 羲名.现存 SCs 类逢 
过鶬蠖乘碥僉立#的妒 展名" 


window, onload - function () { 

playlist * 【 ， T vid*o/preroll 1 *, 

"vi deo/a reyoupopular f, r 
n video/destinationearth ,f ]； 
video = do cwne nt * ge tE leme ntByld ( 11 vi deo T, ); 

video* addEventListener < M ended", nextVideo, false); 将 0 杜 ForkKfltExUi^ioi^ 的禮果矣 

video, arc = playlist [posit ion] + getFormatEzt^neionO; 免的视蝴 ㈣ 无件名邊滅。 

video, load (); 
video, pi ay{); 

) 


在 next Video 中做间样的处理 


function nextVideo() { 


position++; 

if {position >— playlist.length) 
position = 0- 

} 

video, src — pi a^Li all [poa it ±on] + 
video, load (}; 


厂 

getFormatEx te naion {); 


af 傲同辞的处理 ： 将 
0CtR?rtHRt^cte^Lo^ tt 1 镇■^邊 


video, play (); 


试一试 




增加 canPlayType 函数，并完成以上的修改，然后電新加载 
webvilletv . html 文件。能正常工作吗？现在你的代码能确定最佳 
的格式。如果你想知道浏览器选择了哪个视颊，可以尝试在 window . 
◦ nload 和] lextVideo 中增加一个 提醒： 把它增加到各个函数的最后, 
也就是 video.play () 的 后面： 

alert ("Playing ’■ + video. cur rents re); 



HftpJ/locMhosi 
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th^t^re no 

Dumb Questions 

如果我通过编程设置了视频 的濂 + ii^ScanPtayType 
的结果是一个 4 maybe ”，但是播放时还是失败了_该怎 
么处理这种慵况呢1 

解决 if 个问题有两种方法。一种方法是捕获褚误，并 
为视频对象指定爰一个源（我们将在本章最后讨论如何凋 
获错误 ） D 另一种方法就是使用 DOM 在视频砵象中一次编 


不 if 豢 U 的老电视 

写多个 source 标记（就好像在标记代码中键入一樣 _) a il+f 
一来,你的视叛对象就齐了多种选 栎1而你 ■不必编写'史多复 
杂■叶错说处_理：氏 码）。 我_们不行其:在这一章采奸这作方法， 
不过，这綠实是为视频对象提供 . f 种选择的一种方法^而 
且这是通过代码来完成而不是通过标记,如菜你有一些高 
鈒需求 T 就可以考忠这种方法 a 



■ ■.■■■ ** ■ 


你可能需要安装 Q ufck _ e 才能 
在 Safari 中播放 mp4 视频 & 

: r 1、 QuicktlmO 通常会默认安装 * 不 
IWatch it * 过如果没有安装，可以从 , 

http://www.apple.com/quicktime/download/Tm. 







GOOgh 邙咖 6 有额外的安全_，/ 

^iei rfF 页面 

_ *— SSS 不 tsS 将: s 



确保你的服务器提供有正确训 ME 类型的视频文件。 

< 不论你在使用自己的本地服 务器* 还是从托管服务器运行_个使用了视频的应用，都霈要 

id 确保 1 E 确地提供视频 4 如果设有做到，它们可能无法止常工怍。 

■ 如果你在使用一个本地服务器，系统为 Mac 或 Um 很可能会使用 Apache 。 可以修改 httpd 
con f 文件（如果有 root 访问权 限）， 或者在存储视频文件的自录中创建 _ 个， htaccess 文件’并增加下面几 

行： 

AddType video/ogg .ogv 
AddTyp© vid«o/mp4 -mp4 
AddType video/webm .webm 

这会告诉服务器如何提供有这些扩展名的文件 a 

可以在 Windows 上安装 Apache, 并做同样的处理。对于 HS 服务器，建议你参考 Microsoft 联机文 
档 M Configuring MIME types in IIS" (IIS 中配置 MIME 类型 ） a 
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我一 畫在筠你说，这不只 是其子 
JavaScript ”…， 你 S 烃麝到全 歧7。 构 
速 Web 瘅用 要涉及标记、 CSS , 还布 
JiViS«r[ptJL AAPla 


有些时候我们必须把你当作一个真正的开发人员看待。 

这本书中，我们（真心希望）能帮助你走好每一歩^在你跌倒之前，我们 
已经在前面为你探路，确保在你的代码中不会有基本错误。不过，要成为一 
个真正的开发人员，很大一部分在干你自己真正深入，阅读其他人的代码, 
不会只见树木不见森林，井能应对和处理将所有内容集成在一起的复杂忡。 

在这一章余下的部分中，我们将开始 th_ 你做这些工作。接下来，我们会有一 
个例子，这与我们自前看到的真实 Web 应用非常接近，它包括很多部分，使 
用了大量 API, 迅有很多代码来处理大 ttK 实的细节。现在，我们不能再 
—步步 带着你完成每一部分，像从前一样解释每一个细微差别（否则这 
本书会有1200页之多 ） a 而且我们也不想这么做，因为你也需要脱离我们， 
独立地掌捤将所有这些部分集成在一起的能力。 

不用担心.我们-直在你身边，会告诉你每一部分做什么，但是我们希望你 
能开始学习如何得到代码，阅读代码，搞清楚，然后对代码做出改进和修 
改，来实现你希望它完成的工作。所以在接下来的三章中，我们希望你深人 
学习这些例子，仔细研究，让这些代码植根在你的脑 海黾。 真的……准备 
出发吧！ 








我们 f 要你的帮助 f 

正好……我们刚拿到合间，要为他们的摄像亭构建一个 barring You 
VltoT 软件，这到底是什么？哦，这就是最新的支持 HTML 5 的视颊消 
息传送间，顾客走进一个封闭的摄像亭，录制自己的视频消息，然后 
可以使用真实的影片效果改进他们的视频 D 这里有一个老式西部片褐 
色滤光器，一个黑白电影暗调滤光器，甚至还有一个超现实科幻电影 
外星滤光器 a 然后顾客可以把他们的消息发送给 朋友。 我们已经尽我 
们所能构建了视频界而和效果处理系统 Q 

不过还存在一个问题。这些摄像亭还有6个星期交付使用，一旦他们交 
工，你的代码就必须完成。所以，目前我们要有一个已实现部分功能 
的演示样机，还耍有一些测试用的视频文件，我们要在这些基础上编 
写所有代码。等我们完成任务， Starring You 公司的人员就可以用这些 
代码处理刚采集的实际视频 D 当然，要记住所有这些都必须用 HTML 5 
完成。 



所以我们希望你能加人，因为我们签了合 M ! 


產进瘃 T f 个视喊 ■ 加墊#式，盔 
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检查 starring you 摄像寧 


走进摄像亭，来着 一 最 …… 






下面来看看我们的溃示样机，它有一个用户界面。 可以看 到一个视频屏幕，用户可以在这里 
看到播放他们的视频。用户还能应用一个滤光器，如 “老式 西部片 B 或“科幻片 15 滤光器， 


- ■ ^ ^ ^ f ^ ^ 1 n wcMUoerir ， 

看看效果怎么样，把它发送给 朋友。 我们还没有提供记录功能，所以需要一些可以播放的测 



试视颊 a 我们的第一个任务是把所有内容集成起来，让这些按钮能够正常 t 作，然后编写视 
颊滤光器。在具体做这些工作之前，先来査肴界面： 


at 演矛祥机的界®。4中间有一个视频砝故器，芍 w 视看视頻。 



在用这蚤4政的竑栗：.老式®部片（旙 
漶光器），圬(蝻滿泼光 B ) 或科 
Pt ( A 转视韻 ) a 



\ 选碑一个删谈髁頻。栽们的样机有 

播致、暫 (♦. 胁播旄和 S 个瓶 ㈣㈣ 选择。 
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I.fi 

不夷 SBc 蜚的老电视 


打孖演示样机的包装 


演示样机已经通过翌口派递送达，现在来打开包装。看起来我们得到了一 
个已经有基本功能的样机，目前为止已经编写了一些简单的 HTML 标记和 
JavaScripto 下面先来肴# HTML ( videoJDooth . html ) 0 先坐下樂，我们有 
好几页工厂代码要査看，然后就会着手处理真正的代码了。 

辦有缉式工 0 B 经笮我 Q 完 

Aj I H f 屢 C^S± 件。 


width- T, 720 ,T height^"480"X/video 


< < doctype htail> 

<html lang= M &n''> 

<head> 

<title>Starring YOU Video Booth</title> 

<meta char set -* 1 utf - 8 "> 

<link rel^ ,T sty 1 esheet" href - 11 videobooth t css n > 
<script src= M videobooth. js"X/script> ( ~ 一 

</head> 

<body> 

<div id= M booth ,f > 

<div id= M console "> 

<dLiv id= f, videoDiv 11 > 

<video id= ,f video 
</div> 

<div id=.’dashboard/) 

<div id= T 'effects M > 

<a class= M effecf 
<a class= ,F eff©et f, 

<a cla 9 S= T *affect M 
<a clas 5 — T, &£fect M 
</div> 

<div i d— ,T con trol s ,f > 

<a class= M control 
<a classy M control 
<a IT control 

<a class= IT control 
</div> 

<div id = 111 vi de o Selection 11 > 

<a class= 1 'videoSelec n tion 
<a claas= t, videoSelection 
</div> 

</div> 

</div> 

</body> 

</html> 



■i f ± f 蔌 Of 龙铽个丈件中的 

丈郭分代 H 后琚含嫜韧介绍 [ i 个 支件, .不过 g 窗 
屬 瘅妯们6红铽§ 5控剌界衝# .组的 fiti …… 


dim 栽 f ) 有了 一个#科会 t 名起柒 S 列分片视赖茧泽这扣一个辟 
/- fit 、 操以,板工■专 3 闼接.往：分 MA (垃 票）、 

1/" ( 粒缚）和 \^idi&SiU^tlovL ( 视频送戏） „ 


K -他们 3 绞袅装 5 — 个佟频祛放 B …… 不抟 • 
戧们就 f J ii 样一个埭放器。 


id= ■ ， normal ,T X/a> 
id= ” western ,f x/a> 
id =,1 noir " X/a> 
id= ,1 3cifi 1 ， X/H> 


(if 基錡 有垃粱 9 


^ G 苷茚只是 HTML . 貓, ， 柄后全 
介绍如用兵联这#權…… 


id: 

id = 

id: 

id: 


> play 1, X/a> 
'pause M X/a> 
'loop '*X/a> 




id~ ,f vi.deol ,T x/a> 
id— ,T video2 ,T ></a> 


茶个刑试矩 的演 矛视频 
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查看 3 的代码 


检 f 其余工厂代码 


下面来査#从工厂发来的所有 JavaScript 代码，包括建立按钮的代码（刚|已经 
在 HTML 中 看到） 和各个按钮处理程序的代码（目前，只需确保按下了正确的 
按钮）。开始增加我们 ft 己的代码之前，先来仔细研究这些现有的代码。 



规在来着 JavaScript . 

下面来分析 JavaScript (videobooth.js) D tt 起来界面上的所有按钮都能 
正常工作，只不过它们还不能做任何有意思的事怙。但重要的是，我们要了 
解这些按钮是如何建立的，因为这些按钮将调用我们所要写的代码（比如， 
要播放一个视频或者用一个效果滤光器观看一个视频）^ 


下面你会看到页而加载时调用的函数。以下代码会逐步处理毎一组按钮（效 
果 - 控件和视频选择），为锚链接指定点击处理程序*下面就来看一看： 



用的 S 數。 


window, onload = function^) { 

var controlLinks = document. qfuery Select or All ( ,T a, control "); 
for (var i = 0; i < control Links .length; i++) { 
controlLinksfi] .onclick handleControl; 

) 

var effectLinks = document + querySelectorAll ( T ， a. effect (t ); 
for (var i = 0; i < effectLinks. length ; { 

e£fectLinks[i.] .onclick = setEffect; 专 

} 



苫个 fbr 诘笱保坏 
桉纽中的 ; tJh 

螓致器控_中备个抬纽的 
3| /? il S ^6 


玟莱钼中 相毬的 itlj 沒 4 


var 

for 


videoLinks = do cutae nt. que ry S c torAl 1 ( 

<var i = 0; i < videoLinks.length; i4+J 
videoLinks [i] .oncliek = setVideo; 


T, a .videoSalection 1 *); 



轰后. 視频 a 择吸中接 
setvideo 。 


pushUnpushB ^ ttonsr T vxdeor ( f []); ^ —— — ^龙 成所有 蕃础工 (1, 戧 们谜用 一个蹿助圣 崴让界 

pus ―一 ㈣ "一、[川 ■下獅“（繼器）拉 


你以前没有见过 document : . querySelectorAll , 它类似干 document • 
getElementsByTagName ,只不过你要:选择与一个 CSS 选择器匹配的元素。这个方法会返阅 
一个与 CSS 选择器参数匹配的元素对象数组。 

var elementArray — document.queryS^lectorAll (^selector ; 
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不再：老电视 


蛮卷按钮处理程序 

0 K , 到目前为 JavaSedpi 代码负责建立所有按钮，从而在点击按钮时会 
调用适当的处理程序。接下来，我们再来看具体的处理程序，先从播放器按 
钮的处理程序开始 T 包括 play (播放）、 pause (暂停> % loop (循环）和 
mute (静眘），看看它们做些 什么： 

a 个处理枝垮中书光.爱傲的熹杳看綿说 


3 ld f h 可以知 ( Id 个走棄袅 





function handieControl (e) { 

var id - & . target, getAtt r ibute {" id"); 



) 


if (id =- ^play 11 ) { 

pushUnpy shButtons ("play ", [ "pause"]); 

极決 fSH 本的祜 &, 哉们含 if 螫界 ® 来 
} els© if (id = "pause") { 7 反碘 # 下了嘟个 # 钴。则如，如果接下 

pushUnpushButtons ("piius© 11 , [ ,, play"l); J faus.e r phy 杖； T ■ 秸抬下 、. 


} else if (id T, loop H ) { 

if (i sB^ 11 o nPushe d ('' loop"' >} { 

pushUnpu s hBu t to ns ( T, , [ ,T loop 1, 3>; 

> els « { 

pushUnpushButtons (’ loop 1 ’, [] J ; 

} 

> else if (id == T.mute ”） { 



戟们僅用 3 —个辑纫凾 數来秀 tii 
理屬華 ii # 狂的徒态，这个函盘名巧’ 
pi^csh Wpus k ^ utto 八 s , 1§ 荀 S 个參盘， 

—个是拓 T 的接纽.另一个袅束接下#在 
的數迓， 它含更靶界面来炱嘁 H 个挾& s 


if (isButtonPushed( 1 'mute M )) { 

pushUnpushButtoTia ( T,，T f [ ,l mute T, ]>; 


)else { 

pu s hUnp V) shB^t t ons {[]); 




V 前於 it 蚺有代碎部岛界 BijM , 它 P 」 是将#钰的外 
规从 ”招下 _戋筠 "未# 下”，规乜还沒有 rt 砝瘃 
宪咸发体的10,如旙放一个現賴。这墊代兵龙由 
我们来鵠萆。 


不 0} 接往节不同的读义。 則如 - -ptW jj fa 
pMe# 结就的荦 [| 钲 （接下 一 
^, 杖 # 绎起另 一个） h 而 Htwte 和 U? 叮 I 
則($1 科 B a 


这确实很不错，不过我们的代码放在哪里呢？下面来考虑一下：当一个按钮（比 
如说 play) 被按下，我们不仅要更新界面（前面的代码已经做到了），我们还要增 
加一些代码来具体做些什么，如让视频开始播放^下面就来看看另外两个处理程序 
( 用來设罝视频效果和设置测试视频），从中可以很明显地看出我们的代码该放在 
哪里 …… 
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建立按钮处理程序 



setEf feet 和 sefVIdeo 处理我序 

下面来看另外两个处理程序 setEffect 处理程序会处理你选择的效果，如 
无效果 ( normal ) ,西部片 ( western ) ' 黑白片 (film noir ) 或科幻片 ( sci- 
⑴。类似地， setVideo 处理程序会处理你选择的测试视颊，是视频1还是 



视频 2 d 这两个处理程序的代码 如下: 

function setEffect(e) { 



忘鸟⑽ tT £* L.lt 理 d 瘩 的嫩法 是 一 得的： 
t ? 光截 Bail ‘用 (i 个 钍碟炫戽的 光景的 y (辦点击 
的犍钮） ， 軲后相,6祕更蘄界面。 


var id - e. target .getAttribute ( ， t id t, }; 


} 


if (id == "normal") { 

pushUnpushButtona ('"normal'^ ["western", "no±r'\ 

} else if (id «= .’western") { 

pushOnpushButtons ( (t western 1 % 「 normal M , f _noir", 

J else i£ (id =— f, noir T, ) { 

pushUnpuahButtons ( T, noir f, f [^normal 0 , '"western^, 

} else if (id 雄 ''scifi' 1 ) { 

pus hOnpushBut tons f ,T scif i T, , [^normal", "western 1 % 

} 

^ 我们将#龙赴理 的各# ff : 兄 ff 扣代 



, ~、 setvLd 切忠是一样 E 看孩下 
1 / 个接 1 


function setvideo(e) { 

var id = e.target.getAttribute; 
if fid == H videol T, )( 

pus hUnpushBut t ons ( ,T vide ol^, [ p, video2 u ]); 
} else if {id == M video2") { 

pushUnpu s hButt ons ( M vide o 2 M F [ M videol ,T ]); 

} 



还震在这 f ft 加代兵，來贫现右 
承个制试视頻 Z 间切換 _, 
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.. .11. r * 

不策 : h 裝的老电视 k ... 

'^pF 

这里給出:輔 助焱数 : ： '‘蠢_ 

4獅完餐（― r 果你正 搭乘肮 fen 个小时的航班飞往^ flr # ' 
上鮮塌—些辆下面锋雞典，的 ■: 

W 作 p—hftKito — 务着祛纽 徒在二 4 g 薄二个 塵拓下铒咖 d : 

fu.ctio.pus^po^ttonsadT^h ； ^^^ { , 爱接下的故_忒祕 

if (idToPush L^ ,MT ) { <r—-^ 

var anchor — document^getElemeni^Byld{IdToPush) i 巍奴这用 2 令 M 的益％ 棄 * 

var theClass = anchor.getAttribute C' f elass ,t )-； ^*.HidJlss 属枝 . 

if (l theClass. indexOf (^^elect^ed") >= Oy 
theClass- = theClass - + selected ”； 
anchor. set Attribute { f, class r, f theClass}; 

var new 工 m^ge 公 lf url(images/ ,r -T idToPush 争 T .pressed,pngJ"; 
an ch or,s tyle. backg roundlmage- = newlmage, 

} 


在從 中详加 " ultotrd "" ^ 
〆 这个#钻 ， 斿…" . 


认篆‘_桉7 


^ ■■-…更新镩尤景的 Iff © 煉 
- 6 卷下“ ©薄 躧差这 个相纽 


用—个狂 


_ , 愛让撻纽不再桉下 , 绳 I ?■钍琿不 

for (var i - 0,' i < IdArrayToOnpusK. lengthy i+^ { 兵 # 下 # 苒狂 d 數铯中的备 

anchor = clocument^getJSlementByldfidArrayToUiipush^inT 豪，巍紋各个雜 …… 

tlieClass — an cho r. ge t At tribute { M era s s " > ; 

. 漆係 ii 个接 i £ f $ t 6 铃祙 7 

if (theClass. indexOf ("selected 11 J >= 0) { ^ 含 有—个 - 类） _ 

theClass = theClass. replace < "selected", 11 ,T )r 

anchoir.satAttribute { M class M , theClass)-; > …… 从类中刑餘 •，… . 
anchor. style. backg roundXmage 
厂 


nn ■ 


……另外抓陰背署 iTff , 从 石铛着到 
未梠 ~e 的接组 9 



LS'fektt 机 PHShfitf 只 甚 奢看一 个接益！ 否3 茲拉下 
% M — 个键的 lif 7 “ … 


funct i-on= IsButtonPushedfid)(. 

var anchor = document .getEleme ntBy Id (id); 
var theClass = anchor. ge'tA'ttrib^ite (^cJIass 11 ); 
return (theClass .indexOf (" selected ,f ) >= 0 ) ■广 ^ 

) 


获酞 id 个從 


得 f ) ■这个箨的类 
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前期 : 


该试试这个新的演示 
梯机？ f 


我们还没有编写太多代码，不过一直在阅读和理解代码， 
这也很不错，收寐不小。下面把 videobooth . html 文件 
加载到你的浏览器，检査这些按钮。对它扪做充分的测试 
另外，还可以在 处理函 数中增加一些提醒，从而更好地理 
解这些代码的工作。等你完成 r 测试，我们就会开始编写 
—些代码来让这些按钮真正起作用。 


a 



技试 M 有 iA 些掮钮, fit 有##纽俅差辈送招纽 



^^arpen your pencil 


的爸索…… 


对子: F # 的按钮 ， 请标出它们係孖兵按钮（独交的按杻）还是僬蕈 
逯钮 c 拽 r - 令 拽钮， 其他摊纽弑会3起采） a 还*标出每个按钮 
相应的旦击处理$1序，我们 B 轻为伪完成了凡 项： 









t. 


錢 繼 




:㊉㈣ 




选搏。 独立子其姑接纽值用^ 
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棄 4 -个 

< cUv > 中，这个 < dLv > 

i 。 < video > x $( st ^ 

S 則4绝对仿更 . f 逢它 
佬 子控射 台中关。 


不再 


n K 老电视 


t 锚枝号备个铋的<‘▽>_」 
会龛一 个宽度 和惠度島它的在的 跆纽匪 
. 東击一个 1 ■搞纽"的.含七这 个描梅 
—个铯 .1 鋁渙,客孕 一个接下的捉 逆朱 


这正是 CSS 的强大之处。 


这本书;不是 ({Head First HTML 5 Programming with JavaScript 
& CSS )) , 真是很遗憾 ， 不过倘若真是那样，这本书就会有 
1400 贾了，+是吗？当然了 T 对能以后会有人让我们写一本 
高级 CSS 的书…… 


不过，说正经的，这正是标记负责结构，而 CSS 负责表现的 
威力（如果这对你来说是一个新内容，可以看看 《Head 3 Fim 
HTML with CSS & XHTML ))), 我们做的并没有那么复杂， 
如果你很好舒，确实想知道，下面做个简单 说明： 


< dtv > e^f 

婷撤 薄岑硿 (不带接组) 


d^Mboard < div > 榷的子硿 糾台旋 f f 
贫后枵备组接.法的<^心>相的号这个操 


終 I 

#下的拉益有一个背 f 5!深。 


e 颶承參 


如果想 i_4 访史看 css r ■ 看寿 '/i^eobooth.tss,. 
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练习 





f^Jharpen your pencil 



ir 




对子的椬钮，谪标出它们偽孖兵桉钮 (刪 _， ㈣ 夢 
单逸賴钮（按7■'令賴钮_其他按钿轼会弹起來>,还褢标出毎个 
按鈕相应的点击处理程序 p tsCT 是我们的 芩索： 



:所充'接放器 








-； V ： 








的专:视赖洼待 桉砝梅 '(t 菊 .: 

㈣ 瓣鉢 


5::盤丑迄 




…… 丁 i 


辦有 Ci #_4 羊逢搪纫.一次只 
元许釦襆0左用一种绞果 


葷遠#纽 .^ 
j ^ paw ^ 不鲑阌的 


v 


sBm 


il ^ HIH^Liii 

视频选择接钮也是荦选 
龍‘ 观; e 

-个视頻 1 


Uf£Xp 和 Mw ± e 4 孖关 
論, 芍 k / 種垚子 
H % 接 U 谩兩。 
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不再是父 f 的老电视 


准杳好我们的演示视频* 


实现按钮控件之前，还需要有视频能够用来测试，从桉钮可以看 • 
到 ， Starring You Vid ⑶已经给我们发来 f 两个演示视频。下面就来创建一个 
对象包含这两个视频 • 然后为 onload 处理程序增加一些代码，设罝这个视颊 
对象的源（就像我们在 WebvilleTV 中所做的一样）。 


划逢达 个的象 来包含 馮个沒 
承视《。 稍 m 还汆 面皋敌 a 
—步麟#。 


var videos = {videol: iT video/demovideol 11 , vid«o2 : T, vidoo/dQinavideo2 >; 




window, onload = function () { 



戧们屦馎 l _) v d eo 元蚩，将它 
的涑役 f 為盘组中第—个乇$捲 
士护暴名的视瘫。 


var video - <±ocuinent.getEiementBYld("video’ 1 ); 
video, arc = vid« Qfi . vid^ oX + 9 r etFormAtJEx < tQnsioiiO; 
video. loadQ; ^ 


隽后枭栽柺頻， 如菜用户魚击 y 

巧以 漱砑 :僅鲁 正苯捧故视 
頻。 


var cantrolLlnkB = do dime nt,, que r y Se le ct orA11 { M a. cont.ro 1 TI }; 

for (va.r i = 0 ; i < controlLinks^length; i++) { 

controlLinks[i] *oivclick = handleControl; 

} 

var affecttiinks = docmnent. querySelectorAll ( f 'a. effect 17 ); 

for {var i - o ； i < effectLinks.length; 14+) { 
e£fectLinlc&[i] .onoiiek — set,Ef feet; 

> 

var videoLlnks = document:. querySelectorJLll ( M a .videoselection 11 ); 

for (var i = 0; i < video!Link 3 ^ l^ng t-b. ; i++) { 

vid©oLink ： s[iJ,onclick - setvideo; 

> 

pu s hUnpiasliBu^ton a ("videol",[]); 

pu s hUnpushBu t ton 3 (^normal 1 % []); 

〜 律认盎该 ii 殺话! 


在你松一 FI 气之前，要 fife，getFor mat Ex tension 函数还在 Webvijle 
TV 代码中，而不是在这个代码巾！所以，要打开 webviUetv . js ， 把这个函 
数复制粘贴到你的摄像亭代砰中 w 还有一个小问题要注意，在摄像亭代 
叽中，我扪不能保留一个全局视频对象 I 所以作为弥补，要把下面这行 

代码增加到 getFormatExtension 函数的最上面： ⑽焱數的蚤 _t 

var video = document.getElemeiitByldrvideo® fj|? ^f7f^5$ Q 
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支持定制〃频控件 


实现视频控件 I 

好了，该实现这些按钮了！现在需要指出重要的一点，对千这个项0， 
我们要实现我们自己的视频控件。也就是说，并不是使用内置的视频控 
件，我们要 ㈢ 己来控制应用体验^用户需要播放.暂停视颊或者让视频静 
咅，甚至循环播放时，他们会使用我们的定制按钮，而不是使用内置的控 
件^*这也意味着，我们要通过 API 编程实现所有这些功能。现在我们并不 
打算一切从零开始，否则这意味着要实现我们自己的视频槎擦条，或者可 
能还要实现“下一个"和“上 一个” 按钮，因为这些在这个应用中意义不 
大，不过如果确实需要也是可以做到的 D 你会发现，通过实现这个小控制 
面板，你能很好地掌握有关内容，为进一步深入做好充分准备。 


I I 


现4來貧规所有2墊掮钴 t 


下面就开姶吧 D 先从 play 按钮开始，然后苒向右逐个完成其余按钮 
( pause ， 然后是 loop ， 再到 mute ) ， 怎么样？找到 handle Control 处理 
程汴，增加以下 代码： 

function handleControl (eJ { 

id = e, target .getAttri bute( T, id'*); 
vid«o = dacuroent, getElementByldC^ video 11 ); 



k —— 钱们莱 龙视棘的笨的个 


) 


if (id — “play 1 ” { 

pushUnpus hButto ns( T, play r, , 
if (video. ended) { 
video, load 0 ； 


[ T, pause r, ]); ii 左该和法菊孝。如菜用户接下 

z 一 就戍兎视频的象 

^^一^ K 


video.pl«y(); 

else if (Id == T, pause 11 }( 

pusbUnpu s hButto ns { M pause M f [ M play M ]); 

else if (id =- T ， loop ，T ) { 

if (isButtonPiishedf’loom { 

pushUnpus hBut ton s ( fl [ “loop"] 

} else { 

pushllnpu s hBu t ton a 「 loop", [1); 

} 

else if <id == M mute°) { 

if (isB«11onPushed( T, mute 1 ') > { 



任基苦伪,有 一# ㈢ 界 
饵: 兄刁拥贪 f 来间趑， 

法必：如果旙故一个视颁. 

个现鏔播放 鸽耒， 然后爯重新#诒 
接旋，則必绅者光 f 靶加 * u 
戏们要检杳以4佟现锊鵠实4放锘 
t (布 不圣电 4) , 街蟪我们只想 
在结乘播放的伟况下对寶新釦栽。 
如果 P - 甚暫傳. 5 J 以£戏站放兩不 
HJ 加獻。 


pushUnpus hButtons ( tMt , [ M mute ” 】 J; 
} else { 


p ushUnpu s hBu tt ona ( M muts 11 ,[]); 
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实规其余视频控件 

F 面来实现其佘的控件。它们都非常简单，简直是小菜 一碟: 


不再是父華的老电视 



function handleCofitrol (e) { 

var id = a. targ«t,g©tAttribute ( ,f id^' >; 

var video = document .getElementB^Id^videa tR ); 


if (id F ， play") { 

pushUnpu shButt:ons (_ T play ' [ "pans e M J) 

video. load(K' 

video,play() f - 

} else if (id == 11 pause{ 

pushUnpushButtons ("paus e ", [ "pi ay"]} 
vidAO . pttua * (); 


else if (id == "loop") { 

if {isButtionPushQdf^loop^)) { 

puahUnpuahButtons { 1MI , 「 loop"]) 

} elae { 

pushUnpushButtons ("loop", [] J; 



video, loop = ! video ^ loop; 





else if (id -- ,ir mute T， > { 

if (isBu11onPushed{"mute")) { 

piishUnpushButtons < M ", [ M nmte M ]) 
} else { 

pushUnpu shBy tto na ( ,T mute 1， # £]>; 

> 

video.mut«d — ! video .muted; 


如菜用户皙 f 4 视硝，值用视 
釉的象的沪方:名。 


的子緙钚 旛故，视賴时拿中有一 
ti 设燃达个属 ft * 


V V « ■ » 嚙 


光此，你 鸾使用 迻輯操 
<1符丫 (非操 fi 符）链 ㈣ 
^ t T 迖金抖4次化极反。 



咐 Kte 也采用阌样的漱法；只禽 
存接 Tii 个祐纽 爿坍厲饯 
的杏箱箔驭瓜 。 


) 


爯来试 一试丨 

确保键人了以上所有修改 3 在浏览器中加载 videobooth . 
html , 测试一下你的控件按钮。应该能看到视频开始播放，你 
能将它暂停，将它静音，甚至可以 让它循 环播放 g 当然，你还 
不能选择另一个演示视频或者增加一个效果，不过接下来就会 
做这个工作! 
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处理视 Men .’ hr 暮件 

注意丰 5 结的一 个问越 . 

还有一个未了结的小问题需要注意，这样才能真正让这些按钮完成它 
们应该完成的丁•作 D 下面给出一个 用例： 你在播放一个视频，而 R 没 
有选择 loop, 这个视频会播放到结束， 然后 倬止。按照我们现在所实现 
的， play 按钮会保持在按下位置^如果它能弹回来，做好准备再次桉下 
是不是更好些？ 

这一点使用事件可以很容易地做到。下面首先为 ended 事件增加一个监 









尽#尽萬 


听程序 P 将这个代码增加到 tmload 处理程序的最后: 


video.addEventListen©x("ended”, endedHandler, 


现在来编写处理程序，只耍达到视频未 m 停止播放时就会调用 
这个处理 程作； 


false) ； 

^ ^ 辜 f 年设 I - 个 

钍理枝埤，衊婢旙放铉耒 
的弒含谪用 a 个钍遝锃萍 
( f !4 暫傅时不含谪用）。 


function endedHandler() { 

pushUnpushButtons ( M11 , 


["play"]); 


戠们, H 璇的栻袅 n 接 
下’ _ play 掠组。 就 这么浥 輩! 


爯试一试 . 

好了，完成以上修改，保存代码，然后重新加裁,现在开始播放一个视频， LL 它播放到结束而不要按 
下 loop 按钮，到最后你应该会看到 p〗ay 桉钮弹回到它原来的状态 & 



疙頻旙放诘聿 s4 ^ Lj ^ f £ 
来的杈 
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切換测试视频 

我们已经增加了一个对象来存放两个测试视频，甚至还设晋.了两个按钮 
在它们之间做出选择。每个按钮都指定了 setVideo 处理程序。下面就 
来编写这个处理程序，从而可以在视频之间进行 切换： 


以下 I 笆 t 凍个 俛銪的 的象, ai 4攻给达这个爿象接薄 ， 
麟釦何 a 用这个对聿…… 


不再蛋父辈的老电视 



var videos = {video 1: "video/demovideol’’ ， v,ideo2 : 11 video/demovide 02 ' h }; 




function ^etVideo{«) { 

var id = e , target * getAttribute {" id ，T ) ; 
var video = document. getElementByld t T ， vid«o 1 


Cif A 次给出 4 i 球疗序 


. kr 


同样的.戧们奄.寒视頻的喿的 
个？ I 用。 


if (id == n video 1 M ) { 

pushUnpushButtons{"videol" 
} else if {id — ”video2_ T J { 
pushUnpyshButtons { M video2 f, 


'videom ; 


■videol"]> 



vld^o,src = videos[id] H 
video.lo&d (); 
video.playO ； 

pushOnpushButtons(^play ■ 


getForxnatExtensionO ; 


因妁用户点逢一个新的视 
姆 ㈣ ， 含科姥播故 ( i 个视领 。 


pause 1 ’】） 

T 


钱 后仍以 阌样的方式更軔為 
I 这， 运 s 来礙時琏。 

孩下来僅用接 i £ 的源 {M (锚的 Id 覊性) 
获敌立4的戍癀丈啤名. 4 加上刮 羝 

'象使用 ju 记徤 . a 

乸名。 


: f 有了 正磘的视频珞行和±件名 巧以 
灰栽再旙旋 a 个视秭：^ 


切换#测试！ 

对你的 setVideo 函数做以上修改，然后再次 
加载豇 面。现在应该能轻松地在视频源之间切 
换了。 



你现茌的位遛 ► 
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video 元素汸谈 



H 丁 M 厶5机费 

本周访谈： 

Wdeo 元素的告白 





Head First: 欢迎你， Video D 我正要谈到 
每个人都很关注的一个话题 T 那就是关 
干你和 Can vas 元素。 

Video: 什么意思？ 

Head First: 现在火街小巷都已经传得沸 
沸扬扬了，还需要我多说吗？ 

Video: 有什么可说呢？ Canvas 和我关系 
很好呗 D 她能用一种，怎么说呢，一种 
看起来很吸引人的方式显示她的内容， 
而我是一个视频达人我 能处理 编解码 
器，把这些视频内容呈送给浏览器 & 

Head First: 嗯，这不是我想说的，不过 
你说的我懂了。是不是这样：她很擅长 
2 D 显示，而你的优势在于视频显示那 
又怎样？真正的联系是什么？ 

Video: 就像任何关系一样，当你把两样 
东西放在一起，会得到比这些部分简单 
相加更多的结果，正所谓1 + 1不等于 2 t 
此时就会得到些特殊的东西 . 

Head First: 好的，嗯，你能不能更具体 
地讲一讲？ 

Video: 这是个很简单的槪念。如果你希 
望不只是基本的视频播放，述要做些别 
的。也就是说，如果你希望对视频做些 
处理》或者定制覆盖，或者同时显示多 
个视频，你就会用到画布。 


Head First; 听上去还不错，不过视频要 
求大负荷的处理，我的意思是说，这会 
有大董的数据传送。 JavaScript 作为一 
个脚本语言，怎么能做这些具体的 X 作 
呢？编写 JavaScript 代码可不是使用一种 
本地语言編写代码。 

Video: 哦，你肯定会大吃_惊的……你 
没看过 JavaScript 最新的基准测试吗？它 
已经很快了，而且一天比一天快^它是 
这个行业綠闪亮的新星，很多问题都已 
经解决，相当了不起。 

Head First: 嗅，不过，这是真的吗? 

Video: 千真万确^ 

Head First: 你能给我们举几个使用 
JavaScript , 画布和视频的例子吗？ 

Video: 当然，你可以实时地处理视频、 
检査 视频的特性，从视頰帧获取数据， 
还可以通过很多方式修改视颊数据，比 
如说……旋转、缩放，甚至修改像素^ 

Head Rrst 你能一步一歩地告诉我们怎 
么在代码中完成这些工作吗？ 

Video: 噢,我很快就回来，刚接到画布 
的一个电话 * 我得赶快走了 • 
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现在采些特效 

现在是不是该增加一些电影效果 f ? 我们希望能够对我们原来 
的视频应用这些效果，如黑 A 片、西部片，甚至超现实的科幻 
片效果 s 不过，如果查看视频 APL 你找不到任何效果方法 4 也 
没有任何方法能够直接增加效果 D 那么我们怎么增加这些效果 
呢？ 

现在花点时间来考虑如何向视颊增加效果。不要担心你还不知 
道如何处理视频，现在只考虑高层设计。 






你现在的位罝* 
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实现视频效果的计划 


FXi 十划 

对于 如何实现这些效果，我们还不是很清楚，不过这里 
有一个高层 计划： 


A 我们知道还必须把这些控制效果的按钮关联 
w 帛来，所醋先来做这个工作 D 


£% 我们会学习一些有关视频处理的知识，会 

W 利用 “ scratch 缓冲区”技术增加我们的效 
果》 


0 我们要实现 scratch 缓冲区，可以利用这 

一 个机会来了解视频和画布如何 合作， 




侵用至布卖现 
论 ( f ■扈否 构信）> 


0 为每个效果实现一个 函数： 西部片 
( western ) ,黑白片 (film notr ) 和科幻 
片 ( sci - fi ) c 


function noi^ (pos r f g, b , data) { 


0 最后 ， 把所有内容集成在一起，完成测试。 



戧们含4—个（你应 
技 耥秭 钊） 也布中苏 
承時电运的 f 象黄。 


— * • _ 

现在你了解了我们将分别实 现一个 函数来处理各个效果下面以黑白片 为例， 如何从视频得到一 
个有色像素，并把它变成黑白的呢？提示，每个像素有3个分置，分別是红、绿1蓝《如果能得 
到这些分置，该怎么做呢？ 
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不苒遠父聖的老电视 

现在让这些效果按钮起作用 

好的，首先来完成容易的部分：我们要把这些效果按钮关联起来，让 
它们起作用6先创建一个全局变量，名为 effectFunetioru 这个变 
量用来保存一个函数，它能从视颊得到数据，并应用一个滤光器。也 
就是说，取决于我们想要的效果， effectFunction 变量会保存一个 
相应的函数，它知道如何处理视频数据，并使它变成黑白色、 褐色， 

或者反转来实现科幻片效果 □ 所以将这个变量增加到文件的最前面： 

var effectFunctipn = null; 

只要点击一个效果按钮，就会设置这个变量。对于现在，我们将使用 
western , noir 和 scifi 等函数名，梢后来编写这些函数。 



Cif A 次给出 aeteffbt 处瑾沒辟。 Midd , 只雲 M 户电击一 
个效某#往軚含.用这个公理汀厚。 


function s«tEffect(e> { ^ 

var id = e .target. getAttribute ( T, id ,T ); 



接下备个签纽我 f } 将 

為相左的备數 (Cj 签备盘 
H 諱塞戠们鵠骂）。 


if (id "normal^} { 

pushUnpushButtons ( ,T normar', [ M western' f, noir n , "scifi T ， JJ; 
effectFunction ** null; 


或正常 (n<3m^«L) , S^j 
使用 


else if <id — T, western") { 

pushUnpushBtittonar 1 western", [ "norma r 1 , ， T noir'% M scifi ，T ]}; 
effectFunction - westerti ； 
else if (id _’noir") { 

pushUnpushButtons ("noir", ["normal 11 , T, western", T, scifi P| ]),- 
effectFunction « noir ； 
else if (id == n scifi") { 

pus hUnpu shBu t^tons {" seif it"normal'% 
affectFunction = scifi; 


'western", ”noir"]>; 


l ^ ff £ : CtFu^uyirioirL 
设 M # _ 个 ( I 达 
/ 会 ■! 的圣蛊 .忿 
/ 将蚱 视頻具体左 
用玟采。 


Sf 塵铽写迖#砬 I 產教。新以下®瘃 



好了，有 f 这些基础，下曲就来学 4 “ scratch 缓冲区”，然后再回来看看如何 
加人这些 函数， 以及如何编写这些函数！ 


你现在的泣靈 
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. - 


] ， 


泽视#中的 抱毯。 



在鍰冲荔4中公 JS 颇色.例如.变冷 

痒后将让疼汶的缌趟袖 
从 a 个镶冲糾的签 



© 处理一将它 i 制 
到另一个五示畐布来艰* a 



概述 


广％ 


&何完成视频处理 


苗 





目前为止我们所做的就是，想办法为 effectsFimdion 仝局变量指定一个函数 5 作为点击界 
面中效果按钮的结果。现在你要掌握这个知识，把它牢丰记住，因为我们要搞清楚如何得 
到视频并实时处理来增加效果 & 为了达到这个目的，我们需要得到视频的像素，修改这 
些像索来实现我们所需的效果，然后以某种方式再把它们放回到屏幕上 e 





蘼承 • 


那么，视顿 API 有没有提供一种特殊的方法可以在昆示视频之前先处理视 频呢？ 没有不 
过它确实提供了一种方法来得到像素，所以我们只需要有办法处理和显示像素就可以了。 

等一下，像本？显示？还记得第7章吗？画布！哈，完全正确，我们确实提到过 video 元素 + 

和 canvas 有一种“特殊的关系 B s 那么，下 [ tf 就来了解 vid ⑶和 canvas 元素合作的一种方 f 厂 
法： 




( J ) 视频燔故器在 疟台解 
码，斿蟠敖视賴 


( 2 ) 视頻埵柏 M 复制 到一个 
(腺藏的）鎌冲 画布# 
处理。 




㈣.” 


含扼 ， 

们^ 
戧喊 S 
，视威 . 

荦 3 #A 
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不再 tv ; 老电视 


如何使用 sera 切 h 綫冲 S 处理视频 

现在你可能会问，为什么我 们要使 用两个画布来处理和显示视颊呢？为什么 
不找个办法在对视颊解码的同时就完成处理呢？ 

这里使用的方法是一种已经得到充分证明的成熟技术，可以在密集的视频和 
图 f 象处理中尽可能减少视觉抖动，这种技术称为使用 “scratch 缓冲区”。通过 
在一个缓冲区中处理一个视频帧，然后把它完全复制到显示画布，可以尽 * 
减少视觉问题$ 

下面来逐步 r 解 scratch 缓冲区技术如何工怍。 

洲览番将视頻辟码为 〜系列 w a 每一扣 是一个偽棄构 
成的矩形，色 t 指定时间点的视頻俄璩。 









( 2 ) 解码每一帕视頻时，我们将 它复制 到作为 scratch 嫌蚌 
S 的®布。 



将整个蟥及靶 l _ J 函布 。 t 


^这差 scrfitohii 冲这。 


你现在的位置 ► 
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使用 



(3) 迸偽纛地迭代处理 scratch 组冲区 f 将各 
个傳康传入敦们的效裳也敎来进行处理 t 




,— ns 布将鉍傳音數 

i - : 味着冱迮 ii J | 备个簿棄中的⑦条 

_个傳縈。 

ef f ectFunctfonf M )- 

—雌。 



@ scrafdi 鍰冲区伞的所有像彙都 St 理完 i ： 后，将 它们从 
scrat&h 缓冲& © 布复 齡到 S 示运布„ 




得利处理■… ■■ 



. S 5 ( J ^scrflfcah 该 冲这晏 

布款奴 ©傳.斿整 个1剩 
M 氐弄產 .布， 


f ' j 的函布。 


( D 曲视頻对牵醇铒时对毎—帕重复迖个处理 。 
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两 画布实现 scratch 鍰冲 S 

你已经知道，要在画布中实现一个 scratch 缓冲区需要两个 幽布： 一个用 
来在其中完成计算，另-个用来显示我们的结果 & 要创建这些_布，需 
要再回到我们的 HTML 文件 videobooth 上 tml 。 打开这个文件 T 找到 id 
为 ^ videoDiv " 的<3:^>，在这个 < video > 卜’而增加两个 canvas 元素： 


不再 老电视 



任釀 



<div id— M videoDiv Tl > 

<video id: 11 video" width="720 ,T height^ 11 480 T, X/video> 
<canvas id= "buffer H widtb= ,t 720 Tl height= f, 480 ,T X/eanvas> 
<canv 糕 》 id=s f< display 1 ' width="720" height= n 48Q 11 X/canvaa> 


</div> 


巧 ■ 们耍 tf 知个 tlflWA / as 尤黄 ―个用 ，乍 
鍾冲 3— 个 M 康苏承。 


T ;生意.它们身 f k )- 相考* 


如何箱定视频和菡布的位 I 

现在你可能想知道这些元素如何定位，我们将让它们相互僉放。最下而是 video 元素， 
上面是缓冲区，纟爰冲区的上而垃显示 canvas 元名^我们将用 CSS 来实现，尽管这本 | a ]M 
没有太多地谈到 CSS ， 不过如果打开 videcibooth . css ， 会看到这3个元紊如何 定位： 


divttvldeoDi ?( 

position : re1ative; 
width: 720px; 
height : 4B0px; 
top: ieopx ； 



vUwdEv 为子它辦存的元棄（⑽ A ^ U < dLv >) 故 

1, 箱链左 ± JC^ T d 含枵它放4 硿剌 台的中决。 
栽们将宽度和集度设 < M &0> 以及羿个 ^^>无 
t 的宽度和其度扣筹= 


left : 190px ; 

> 

video { 

backgrounci-cQloi: : 


black; 


< vldto > 4 vLrfeoJ>iv < 中的第一个龙砉， M 以它含 t ) 幼 

我们将嘢 H 蜉熏这样如 
蓽上下扣这戠左右加泣.空奇处倉星熏遶， 


div#videoDiv canvas { 
position: absolute ； 
top : Opx; 
left: Opx; 


4 ^ — =~~ - vidwt>Ev < div > 中的荈个 < wivwbs > 走素和妗子 vu 3 <« oT>tv (^t 
yixf ) 乘用绝的定饴古式, 

故在距 I ：¥. i , ii 楫它们 U 舍每 < vi £ U {>>& 


你现在的位晋 * 
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实现 


编写代码处理视频 





為 

现，我们有了一个 video 元素，一个将作为缓冲 K 的画布，还有一个要逋示最终视颊帧 
的画布，我们让它们依次叠放，这样只会看到最上层 的显示 幽布，其中包含应用了效果 
的视频 D 为了处理视频，我们将使用 video 元素的 play 事件，视频一風开姶播放就会调 





用这个事件。将下面的代码增加到 on load 处理程序的最后： 

video.addEvfintlistener (-play-, procesaFrame. false) 

我们将 fcprocessFrame 函数中处理视频像也井把处理后的像尜放入_布中显示, 
首先要确保能够汸问所有 DOM 对象： 




function process^rame(} { 

var video = document. gctSlementByldM "video T, ); 
if (video.paused |\ video.ended) { 
return r ' 

} 


笏先获取时攀…… 




var t>uf f erCanvas ^ document. getElementByld ( T, buf f© jt" }; 
var displayCanvas = documajit,getElementByld( ， T display"); 

var buffer = bofferCanvas .getContext ( M 2d u J - 疼后获取 3F 个屋 4 ,元 # 的引用 

苁它们的上下±的？]宠、裁 


var display - displayC^nvas , getContext ( ,f 2 d M ) - 

\ 

如何劊建 緩冲区 

要创建缓冲区，需要得到1前视频 1(1 贞，将它 g 制到缓冲区画布 。一 風将视频 | 贞放 

在 1 SJ 布上， 就可以处理帧中的数据了^所以，要创建这个缓冲^,我们可以这样做 
(在 pirocessFrarae 的殽后增加以下代 码）： 

它敗一个 © f 也 把这个囹{ 象铪料约丞砗 £ , 子 xm 

佬 i .. 4 有指 t 的 t 度和惠度 " 

这一:欠戧们认榥频係到一个®簿 .， 将視牦推玄巧 
源.含贷到一个视硝楨 ff 蚌鈀哮盘荈 


们*龙用用 



这记洱第浐耷介绍过的 
X 下 i ^) rfri ? wlrttW 0£^ 

v v 

buffer.drawl^ge(video, 0, 0, bufferCanvas.width r bufferCanvas.heigh 
var frame = buffer. getlmageData (0 ^ 0 f b ufferCanvas^jd th, bu fferCanvas . height) 


厂 




熱 M 从函 4 J ： 下殳获象數狨, 
龙它存餘4 —个変 f 中 y . 


这只 t 表孑存望帒到產 4 中的銪节密保 
盘孫。 ^~ 
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如砵处理缓 ? fg 

我们 ti 经得到一帧视频数据戸面对它做些处理 *! 要处理这令视频帧，我们 要亂环 处理 
帧数据中的每 —一个 像素，取:出存储在各个像素中 Ktrgb 颜色(良实际上，毎个像素有#个 
值， R 6 B 和 Alpha f 透晛度卜，不过我们讲不打算使 MAlpha 。 一旦得到 RGB 值-，我们将 
调用 frffectFunction (应 该记 得，这是392页上建:£的#数，要求你把它丰牟记住的^， 
并提供这个 RGB 信息和视频 


众 a 



不再’ 老电视 



、孜 齟承令 


将下面的代妈增加到 processErame 函数的最后: 


buffer. drawlmage <video f 0, 0, buf f erCanvaB . width, displayCanvas .height ^-； 

var frame = buffer. getlmageData f 0, 0, bufferCanvas.. width, displayCanvas . height )-； 

15= 患怿出顿教 4 的長度。 i ' i-t ,盘掮致在姊的-个4枝 frai 
； cinta 中，乐長度 4. f 咬 ㈣ -办仿的一个黍 fl ( Length ) is 

' 个长4卖杉 i ； 是凾备大 I 的4儐，个 偉黃邾 15+个 
<£： 


var length = data, lengi^i / 


for (vac i 

= 0; i < length 

; i++)( 

var r ; 

车 frame. data [ i * 

4 + 0]; 

var g : 

=frame.da[i * 

4 + 1]; 

irar b : 

=frame<data[i * 

4 + 2 】 ？ 

if {effectFunction)( 



现存皤辽处浮 ii 个尨 4 C , 得时苫个懞着的％5个渾 
寿奋廒翊中名 4 个空阄，蚵 ga 们从第一个治 g . 获鉍 r (红 
兔令 n 认第二个仡 g 获驭 3 (缂 t 分董），汉第三个 ㈢ 
8获肢 b ( Ht 0*) , 


^ffeatFunation<i r r, q t b, framA.data} 




^ display * pis tlmagftD^t^ (frame, 0, 0) ? 

到 顿數 M3 铨得利 ith 奸 k 戧 fO 叇用 Jt 下之的 

方 法鸪达个鼓揭放在簋迕凾岛 I ： y 这 个-.方 4 Sr 
續 i 的知】猶右 葛抄函雅定的 x 七佬 售。 


«号 r if 用⑽（如保老抬下 
二，咖 km.nL 接纫 eff ^ tFu _ Loi^muuy , f 4 入 ff 黄 

崎她 ㈣ . 

以!=敎權鞠—的 


e 经扯攻?/一桢二 卞一核嘬? :: 

'•■ . . _■■- ■■■■■■ ; ： . ■ •■■_■■■■.■ ■■ ' ■■■ :_ ■■- _ ■■■::■ T ." . ' •—■•:•■ ■■■ 

' 我们 W 处瑝了胃一帧/希:绍細着视频蝻继读 M 放能 鲶处通 所#视 

帧 * 可以使用 并传人 ^毫秒值 ％ 要考衫巧赶 £ ip 尽快霞次运. 
-45 proeessPrame 5 . JavaScript •與的 fr :0 毫母两就运行这个蚋数，+ 

过电会 提供埤 能得到的下二企‘快二"为瓦,要将下面的代由二 
增加到 pr o c e s r a me 函数的 最后： 

setTiSeout (processFrame ，- 0) , 


音 ^ ^ M vt i ® (l 

’心似邮⑽， . 




s 社 rim^iit 鸟 setE Kvtem/At 
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祯速率定时器 




Si 





每任覷承參 



真希望能这样 D 

你说的完全正确：我们真正想做的是对每一帧调用一次 
处理程序，但是视频 API 没有提供这样一种方法。它确 
实提供了一个名为 timeupdate 的琪件，可以用来更新 
视颊的运行时显示，不过它并不按处理帧所用的粒度来 
更新（换句话说，它的运行速率要低干视频的帧速率）。 


所以我们要使用 setTimeout 。 向 setTimeout 传人0时， 
就是在要求 JavaScdpt 尽可能快地运行你的超时处理程序, 
这会使处理程序以尽可能高的频度运行。 


不过有没有可能比帧速率还快呢？如果能计算出一个与 
所需帧速率接近的超时值，会不会更好一些？嗯，当然 
可以这么做，不过处理程序不太可能真的与视频帧同歩 
运行，所以0是一个很好的近 似值。 当然，如果你想提 
高应用的性能 s 完全可 以做一些性能测试，找出最优值。 
但在得到一个更特定的 API 之萷，我们就打算采用这种方 
法了 0 
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现在 f 要写一些兹菜 

终于到这一歩了，我们已经得到编号视频效果所需的全部 内容： 在视颊帧到 
来时获取每一帧，逐像桌地访问这一帧，并把像素发送给我扪的效果滤光器 
函数。下曲来看暗调滤光器（在我们的这个版本中，这就代表黑 ft 滤光器）； 


不 my 父辈的老电视 



>>>1一个抬 


南漶兜鼉必盘 fl 入像 …… II ■铎，兹 

棄 的倍 E …… 

function noir(pos , r, g, b t data) { 
var brightness = (3*r + 4+g + b) 



……以总產 4 中幀激 
邛數铂的一个 3 用。 


^ 个译 黃的鰣节分 ■¥ (「 b 和 0) 
»> 3； 巧苯一个熹度 


壤符， 3 以移 
动數 ft 中的话采 
f 奮钕这个敖。这 
个内審芍以找一 

本 a — 嗉砑究， 


if (brightness < 0) brightness ^ o; 
data [pos *4 + 0] = brigh~tne&s; 
dat^a [pos *4 + 1] - brightness; 
data Lpos *4+2] = brightness; 



燃启稃產 4 ® 傳中的备个分 f 
赋碎这个*度。 


类 t 3 d 这个 函数晷 
々视 0螃中 M 个嚷景 
谈用一攻 6 


泛样羝 的竑菜 4 旖薄者设 
I 筠一个灰度 d —应这 
个律素的髮体熹度。 


黑白效果测试 

把这个函数增加到 videobooth . js , 然 后审新 加载豇 
而* 一旦视颊开始播放 ，^ TFilm Noir (黑白）按钮, 
你会看到一个郁闷的黑白片。现在再选择 Normal (正 
常），不错吧，是不是？所有功能都用 JavaScript 完成 t 
而且是实时的！ J \ 

如粱(号刼 线想, 运磘食捷 

後人的 。 
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_^^ rp«Lyour penQil 

■ -■ ， ■ ■ ■ ■ • ― : . - ... •■认 • •-. = 







.： 这宇节并孑晕 f 门来讨论视趣处理和效東，不过 S 个内桌酶实裉有 : ‘ 
贫 :念— 々斤，’沁本 S 我鱗忠獅片和咖片 的效軎 l 仔細贫这泠伏码 , 

= : v ^ c —.. 辞边做出标注，.说坰每个代辑分别做汗么。概，—致们迗 


一 


- 


E- 


function weatern-fpos^ r f g,, b, datap f- 

var brightness = p*r + 4*g + b^ »> 3?;. 
datalpos + 4 + 0] = bri ^ htnQas +40; 
datar[pos * 4 + 1 ] 本 brightness+20; 

data[pos * 4 + 2] = brightness-20 ； 

} 


function scifi(pos, r, g, b, dataj { 
var offset = pos * 4 ; 
data [offset] s Math. ro\ 5 ud (255 里 r); 
data[offset+l] = Math.round{255 - g) ； 
data[offset+2] » Math t round(255 - b); 


function b wear to on (pos , r r g-, h, out£utI>ata^ 
var offset = pos * 4 ； 
if( outputData[offset] < 120 J { 
outputData[offset] = 80; 
ou tputDa ta[fset] = B&; 
outputD^ta-f-^+aff set> = 60; 

^ else { 

cmtputData [of f s«tr * 255; 
outputData ^offset] = 255; 
outpntData[++offset] = 255; 

K 

outputData L++offset]r = 255; 

++o£fset; 
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大型测试 

搞定了！把这些代码包装起来，准备交付给 Starring Yoi; Video, 
_反复检査-下是不是巳经输人了所有代矶，是否保存，并 
加载 videobooth.html q 然后你就能用你的新应用好好乐一 
乐了！ 


不再 
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老电视 
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不再 老电视 



当然，只霈要使用一个 Web URL。 

可以用一个 Web URL 替换之前本地定义的视颊源 4 例如： 

〈video src - p , http : // wickedlysmart . com/myvideo , mp 4 ”> 

要记住，在 Web 上分发视颊更有可能出现问题（稍后我们会讨 
论如何处捭.这些问题） D 另外，通过网络向一个浏览器或移动 
设备分发视频时，视频比特率的影响也更大 D 类似于视频格式， 
如果你要在这条路上继续走下去，可以清教专家，了解更多有 
关知识 a 





是的，有很大的区别。 

流式 ( sireaining ) 这个词 就像 xerox 或 kkenex —样通常作 
为一个通用词I ,表示从 Web 得到视颊发送到你的浏览器。不 
过“渐进式视频"和“流式视频”实际上郎只是技术术语。这 
本书屮我们一直在使用渐进式视频，这说明，我们获取视频时 
(不论 是在本地述是通过网 络）， 都会使用 HTTP 获 取一个 文件, 
如 HTML 文件或图像 s 而目，总是在获取时对它解码并播放。流 
式 视频则使用一个协议分发视频，这个协议经过卨度优化，可 
以采用-种最优的方式分发视频 <可能还会在带宽改变时随时 
间调整视频的比特率 ）* 

听上 i 流式视频可以为用户提供一个更好的体验（也确实是这 




样），而昆从用户的连桟和你的带宽费用来看也 E 为高效（确 
实如此）。不仅如此，流式视频还可 以更容易地完 成一些 T _ 作， 
比如倘若你_要某种安全性，它能保护你的视频内容。 



译注 : xerox (施乐）是_家主营打印机，印机等叛字印刹设备的公句■现 
在匕经成为 “ 复印”的代名切 。 kleenex (舒;古）是全球焱知名的面巾紙品牌, 
也已迕成为 11 面巾纸"的通用名詞 n 
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视频 






没有。 

HTMLS 的流式视频并没有一个标准。实 
际上，问题并非出在 HTML 5， 不沦在哪里 
都没有为流式视频提供一个得到支持的标 
准 一+ 过确实有很多专用标准。为什么？ 
这有很多原闪，从建立流式视频所需的资 
金，到崇尚开源的很多人不想使用 一个可 
能用干数字版权管理 （ DKM ) 或其他保护 
技术的协议，这些都是原丙。与视频格式 
的愔况类似，仵流式视频方面我们 也曲对 


<St 木 着 

^ v # 
♦伎酈承參 



着一个 S £ 杂的泄界。 



现在有很多解决方案。 

流式视颊技术有很多合法使用，如果你的 
观众数虽:很大，或者有一些你认为需要保护 
的内容，可以查 查看： Appk 的 HTTP Live 
Streaming , Microsoft 的 Smooth Streaming 
和 Adobe 的 HTTP Dynamic Streaming 都是不错 
的起点。 


还有一个好消息要告 诉你： 标准委昂会开始仔 
细研究基子 HTTP 的流式视频，所以请关注这 
个领域的进展。 
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不再 i 父裴：老电视 


如果有个完異的世專 • …" 

可悟这个世界并不 完美： 我们会遇到那些烦人的网络 
问题1不兼容的设备和操作系统，而且行星揸击地球 
的可能性也越来越大。最后这个麻烦我们爱莫能助, 
不过对于前两个，实际上如杲能知道遇到一个错误就 
是成功了一半，这样起码你能对它做些处理 

视颊对象有一个 error 事件，可能会因为很多原因抛 
出错误，这个原因可以在 video . erroirM 性中找到, 
或者更具体地可以査找 video.error .code 域性。下 
而来看可以检测哪些类型的 错误： 



错误 

mwiajhlawrtem 


如果通过网络得到视频的过程被浏览 
器中止（可能是应用户的请求），就 
会使用这个错误^ 


网络获取视频时如果被一个网络 
错误中断，就会使用这个错误， 


MmKSvxjtcm^ 

如果视频解码失败就会使用这个错误 9 
发生这个错误可能是因为编码使用了浏 
览器不支持的特性，或者因为文件已经 
破坏。 


如果不支持指定的视频源，可能由于 URL 
有问题，或者由于浏览器无法解码这种源 
类型，就会使用这个错误 d 



这 I enror 寧件户生的结 " f 異炫，柏忘 
逆会介绍…… 
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处理视频错误 


如何使用 error 事件 









处理错误是一个很复杂的事情，具体如何处理错误很大程度上取决于你的应用 t 需要适合 
你的应用和你的用户。也就是说，我们至少可以帮你起步，为你指出正确的方向。下面以 


WebviUeTV 为例，使它能知道遇到了锩误。如果确实遇到了一个错误，会向观众提供 
PLEASE STAND BY 消息 a 


下面以 
丨供一个 


我们希望出现一个错误消息时得到通知，所以需要为 enw 事件增加▲个监听程序^ p 『以这 
样做（将这个代码增加到 webville.js 中的 onk>ad 处理程序)： 


video. addEventListener ( 11 error ，T , errorHamller, false); 


现在来编写兩数 errorHandleG 它要检查是否出现一 
个错误，如果有,就把我们的 "please stand by " 图像放 




在视颊显示区 h , U: 它作为 海报图像: 


function ^rrorHandler(^ { 



如 果讲用 5 这个公運沒存 it ■光 ^^ y / ideo . tnror , 
砝认 4 食存存一个错 d 然后存视0签异医淹 
—个*雄围簿..， 


var video = document,getElementByld('Video"); 


if 


(video.errors { 

video, poster = 11 images/ technical difficulties . jpg lf ； 


alert(video * error,code); 


-糾(沿否存钵在如汆痒找中的 t 數）。 


错误测试！ 

可以通过很多方式让视频播放央畋，要测试这个代码，必须 u： 它失 
畋，下曲给出几个建议： 

_ 在播放过程的不冋时间点断开网络连接 4 

■ 为播放器提供一个有错误的 URL ft 

■ 为插放器提供一个你知道它无法解码的视顿。 

■ 为播放器提供-个根 本不是 视频的 URU 

* 使用软件减少你的带宽（有很多这样的软件，你可以找找 看〉。 

现在键人这个代码来完成测试。记住，可以査看405奴上的代码 T 把对话框中 
的整数映射为具体的错误码^ 
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不再 老电视 


规在还要锹什么？ 

真是让人兴奋，想想看，你现在已经了解如何处理 HTML 标 
记，如何处理 video 元素 T 以及,当然了，还有画布……更不 
用说 Web 服务.地理定位……哇。确实，我们用画布完成了一 
些很酷的视频处理，关于处理画布你所知道的一切都能应用 
到视颊，这里只给出我们的几个想法，你可以天马行空，增 
加你自己的想法。你可以犒劳犒劳自己了，这是你应得的！ 



使用 Web 服务为视频提供 
与内容相关的信息 . 



创建基于时间的内容，只 
在播放的特写时间段显示, 


使用 JSONfP , 让它具 
有交互性！ 


创建画中画 


使用你的位置, 
发布相关广告 4 


■ Are ym popular ? 蝎 || 






' 


创建你自己的屏幕控 
件或节目指南 D 


对画布 使用的所有图 
片和文本 API 都可以用 
于视频 
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视频 api 回臞 





麵可以使 ，< video > 元素和一简单的厲性播放 
视频。 

■ autoplay 属性在页面加载时就开始播放，不 
过只应在适当的情况下使用 9 

■ controls 属性会使浏览器提供 -- 组播放控 

件。 

■ 不同浏览器提供的控件的外观有所不同^ 

■ 可以用 postedl 性提供你自己的海报图像。 

■ src 属性包含要播放的视频的 URL 。 

■ 对于视频和音频格式有很多 w 标准” & 

■ 3种常用的格式包括 WebM 、 MP 4/ H .264 和 
Ogg / Theora 。 

_要了解你的观众，从而知道需要提供哪些格 
式。 

»使用 < soufce > 标记来指定候选的视频格式。 

■ 在<50叫<：€：>标记中使用完全限定类型可以节 
省浏览器的工作和时间 & 

_可以继续支持其他视频框架，如 Flash , 只需 
在 video 元素中增加一个作为后路的 < object > 
标记。 

_视频对象提供了一组丰富的属性，方法和事 
件。 

■ 视频支持播放、暂停、加载、循环和静音方 
法及属性来直接控制视频的播放 & 

■ 可以利用 ended 事件了解视频播放何时 
结束（例如，来实现一个播放列表）。 


■ 可以用 canPlayType 通过编程询问视频对象能 
不能播放某种格式。 

• canPlayType 方法可能返回空串（不支持这种 
格式 ）、 maybe (可能可以播放这种格式）， 
或者 probably (它对能够播放这种格式很有信 
心）。 

»画布可以用作为视频的显示表面，来实现定 
制控件或视频的其他效果。 

■ 可以使用一个 scratch 缓冲区，在将视频复制 
到显示表面之前先对视频进行处理 D 

■ 可以使用 setTimeout 处理程序来处理视频 
帧。 尽管没有直接链接到视频的每一帧 T 但 
这是目前最好的方法。 

■ 可以使用一个 URL 作为视频源来播放网络视 
频。 

■ 有些浏览器对视频有一个同源策略，要求从 
源页面同样的来源提供视频 

■ 关于视频很有可能会出现错误，特别是涉及 
网络时。 

_利用 error 事件，可以在视频获取、解码或播 
放过程中出现错误时通知一个处理程序 9 

■ video 元素依赖于渐进下载的视频 D 目前对 
于流式视频还没有 HTML 5 标准，不过标准委 
员会正在寻求基于 HTTP 的流式解决方案， 

■ 目前对于保护通过 video 元素分发的视频没 
有标准的方法。 
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不苒是父蜚的老电视 



HTM 厶5琪字游轶 

坐下来观 看更多 Webville TV 节目之前，先来做一个简 
单的填字游戏，把你学到的知识牢牢记住.下面是第8 
章的填字游戏. 




横向 

2+ video 元素用这种方式分发视频。 

4. 要提供多个视频选择，可以使用_5叫「《元素。 

5. 我们使用画布作为 _缓冲区， 

7. 用来反复播放视频的厲性。 

8. 尽快地开始播放一个视频。 

11.开源的音频编解码器^ 

1Z 用来显示处理后的视频。 

13. 播放结束时，会抛出这个事件。 

14. 我可以播放这种类型，你能吗？ 

15. 浏览器控件的外观_, 


纵向 

1,如果希望采用一种内置的方式控制视频要使用 

3. 我们看 Hoi 纪50年代_影片。 

5. 如果一个行星要掾击地球，你应该怎么做。 

6. 星巴克 CEO 洒了他的_^ 

9, 每个 setTimeout 调用时处理的是什么 D 

10. 克林特■伊斯特伍德喜欢这种效果。 
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练习 


「 ^ 


yharp your pencil 

Solution 




% 







鄉 ， 1 m 

这本书并不是专门来讨论视频处理和效果 t 不过这个内容确实很有 
趣。下面我们给出了西部片和科幻片的效果。仔细研究这个代码， 
在右边做出标注，说明每个代码分别做什么•哦 f 我们还增加了•额 
外的一个效果，它有什么作用？下面是我们的答案 


function western(pos r r, g, b r data)( 

var brightness = {3*r + 4+g + b) »> 3 ； 
data[pos * 4 + 0] = bright^ess+40; 
data[pos *4+1] = brightness+20; 
data[pos *4+2] ^ brightness-20; 

} 

function scifi<pos, r, g, b, data) { 
var offset s pos * 4; 
data[offs«t] — Math.round{255 - r); 
dAt»[offset+1] = Math,round 【255 - g); 
data[offaot+2] = Math.round(255 - b ); 

1 

function bwcartoon(pos # r, g 、 b, outputDat^) 
var offset ■» pos * 4; 
iff ou tputDa ta [ offset ] < 120) { 

autputData[offset] = @0; 
outputData [++of fset] - 30 ; 
outputData[++offset] — SO; 

J else { 

outputData[offset] - 255; 
outpntData[++offset] - 255; 
outputData[++offset] = 255; 


outputData[++offset) 

+ 十 offset; 


255; 


® 部埒漶夹器金螬筠「#*的釭逢和錄 g 分 

■I l-4-pBfiBa-Baaa + + •« ■ 1 * ■ * p ^ I- # r ■ -r ■ 

景. , 运含给视頻一神#媒 

^ * fc % p BJ1 . t . JB *. # p . p + ^ + ^ + _ ^ _ 


科6片漶先器将导个像素的分 Iffi 取戾 D 

■ .■■■■ I ■麵嚙■琴 ».§»■»■■■.,. , . J . . ... 

.兮釋二个.渾象衿 g 鱼分 m ■…來每鲜章磾.. . 

釦果_个像景的绿丞分#猓少.现在釗含 

m, ■……“… ■■ 


选先器枵 S 个灯 -5^ 
(上闱 ass ) 的偉老黑疤， 特 MS 苒他係 
奪变 AH 嗜魂頻有一砷爸佟的忠似卡 淺 

■ + b + I ■ !■■•___■• 1 rn J rn kB + e TI;IraiB r _ ■ 

的熏仓外 
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HTML 5 稹字游戏奢溧 




不再是: i 繁的老电视 




ffr.i I.. VI 二 




d 生要 
• U 发以上持 
^快所 eb 支 

艮 V 汾 
-^-1 |» V & 6 

会化看新况 

这变查最情 
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9 在本 M # 储 






是不是厌倦了把客户数据塞在那个小小的表柜 cookie 里? 




这样做在 2 0世纪90年代还算有点意义，不过如今的 Web 应用早 
已经有了更大的需求。如果我们告诉你每个用户的浏览器上可 
以提供 5 M 的存储空间，你可能会像看外星人一样看着我们，就 
好像我们在布鲁克林给你推销一座大桥一样。不过，真的不用 
怀疑， HTML 5 Web Storage 确实可以做到这-点！这一章我 
们将带你了解在用户设备上本地存储对象所需掌握的全部知识， 
可以充分用于你的 Web 体验屮， 


这是新的一章 413 










浏览器存储的历史 

浏 K 猱存储如何工作 (1995 〜20101 

是不是想建个购物车？ M 要为你的网站存储一些用户首选项吗？或者是 
不是只需要将与各个用户关联的一些数据藏起来？这就引入了浏览器存 
储。浏览器存储为我们提供了一种持久存储数据的方法，从而在构建 
Web 应用时可以利用存储的这些数据。 

到目前为止，只有一条路可走，这就是利用浏览器 cookie 在浏览器上存 
储信息。下面采看 cookie 是如何工 作的： 



0 洌 Kft 获取一个 呔如从 " pet 4- Krus . com " 获取 员蓍， 觼奔 癱玎敁 
随兩择崖堪一个 Cookie 中包宮一个 s { 多个靆 值对： 







浏眾器 在 本璉存 T _ 
^B 0 


r 

Cookie: pet=dog; age^S; color 盖 black 

f 

达签馑岱 j ^ g 芍祕 着刊鑣 > et 对应值 do% 

馑 、3 e ” ''5 A 在此类雅…… 


MvaiMi-p #■ mm: 

■ h — \ ■ l|B pp. 
■awr~ nr hsf ，細 • 
"■<1 V* ■ 




t 
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® T 次洌羝赛尚 ™ pets ^ rus , c ⑽ T 龙出请求时，它会滅锖求阂时崖 送幺前 明:到 
的 cookie : 





落个 mrp 请 求和砀在中含 
乘切发 (M Cookie i, 




wSr » 


CoofeU 铋限數拢 


Pctft-H-U* 


■n mm b namw^i 

*(i*41E«l BJ Mil 

'■—n — 
■ M—L T— KH 

_ 琴 — 

min mam nwi "^w 
■op^wwfc. Lo^q 



俯 b 臃音霤 


、令在本地存 

迄将去泉 | 

♦僉酈 承. 


gk 贐务 S 玎吆俅用 eookte 实现令性化的体验.在达1轼是命 两户推 S — 些稽兵 
w 褐品，不过 cooWe 还布很多其他的用法 5 


Wl-fl-Ul 


\ 


M i^Mi 

，爭 ra #^sw 
■ mva •M^rv-mwmmM 

吻 ■«*% m ir> p*4 -^m 
)«1 #Oan- > jUi-*i ^ ia 
JwJ Ml *_U *_ #■■ ■ 




鴨 - • WHd>p n MW 

i*.j m 

-^m¥ h>|^H vid-M 
4fa.lr ， a^ !■<■».■ Mm 




y 致 g 




c ^ feEe 苟 W 用 f 各种 痢诠， 
如安 剩用户 钵耠，存 t ¥# 盎麴 
(比釦昀物 库中的 數猓） 残 
考链护游戏徒态。 



* —个域英赌■如 p ^ tS - RrlAS . 
“， 否 fl 只軲发送给这个域 D W 
以 'Pfits t5w^ori\A.y^.^owL " fj 0 

f ) 达个 {iCJOtelSu 


W ^ b 膿务操 
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web 存储如何 







Cookie 陪伴我们了很长时间 s 不过你可能可以想出一些办法对它们做出改进^ 
你认为 cookje 在以下哪些方面存在问题，请打勾： 


银 I ’ ~着 




只有 4 k 空间可以使用，我的应用需要更多的存储空间。 

每次都要来回发送 cookie t 这看起来确实很低效，特别是如果我在使用 
一个移动设备，它可没有太多带宽。 

听起来利用 cookie 很容易向浏览器传送 病毒和 其他恶意软件。 


□ 我听说如果把键/值对作为 HTTP 请求的一部分，在代码中处理时会很麻 

烦， 


是不是每次做出请求时都可能来回发送一些私人数据？ 


看起来 cookie 不适合我们所做的所有客户端开发，似乎它们假设所有 
切都在服务器上完成。 


靶寮辜彔 砷穿鲜 取凼 w 钟空袋毕崧； 
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HTML 5 V \ feb 存俺如何工作 

HTMLS 确实为我们提供了一个很棒也很简单的 j ava s cr 〗 p t API , 可以在浏览器 
中存储要持久存储的键/值对^现在不再仅限于少得可怜的 4 K 存储空间 ，当今 
所有浏览器都很慷慨，每个用户的浏览器中都会提供5到 10 M 的存储空间 。创 
建 HTML 5 的本地存储时还充分考虑了 Web 应用（和移动应用 ）• 所谓本地存 
储，就是指你的应用可以把数据存储在浏览器上，从而减少与服务器之间所需 
的通信 g 下面来看这是如何做到的（然后我们会深人研究 API ) : 




^ | A 

在本地存储 



在茅疳 


O S # 玎呔在浏 K 器鈐本她存砷中存储 一个成 
多个鍵/值对 c 


0 然后 用键来荻取相瘅的值 0 




〆 各个域分雌傷起“ 
圳的本蟪存俅 t 向 


本摊存鰱 




■P«|. r# ■ wm. jh^ng 

■I i<^ ■VP 

ip«. |»-«lila^lui 

agpj ra .. l^ iy . w % wm 


U- wr ; lim 


个链 / m^ D 


•rnmmtmm 




VI ^ 


存锌 4 神夂忮的 < 印值关两 
.到诺器 臧老涅 出到 览器 , 
6# 鵷的數城仍然 係绍。 



infill* IMII tfllrTl 
-P 1 # 

_ * -■ __ l _ r« mun. 

fHMi tri ■輪 _ u 


iriil IfAm m^tgm ^ h 

ln^ nMnK. iwidJnf 
11 1 」 - 

Pa hm 




^4 




ra :， 


本摊存储 


轅含 <tM 务器 拢供兩 
®- 饪甚 is 可以龙本坫存 

本璉存餚的紐 笮枵由害户处 
孩 F 无不基 M 务基 ( (j —* 点 
鸟 cookie 的漱法相均) 


页面所飪存销和获馭的激 
典珣必須£由同- 个域拢供的 S 面刹 A 
的。书筅的曼多 内容稍 后介绍 a 
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使用 web 存储 


论住 


需要一个系统来完成这些工作？要改进原先的即时贴系统 （更常 
见的叫法是不干胶 贴纸） 可能很困难。你知道它是怎么做 的：你 
把你“要做的事情 H 记下来，贴到某个地方，完成这个任务之 
后，就把即时贴扔到垃圾桶（或者回收）。 

使用 HTML 来构建这样一个系统怎么样？下面来看看，我们需要 
一种方法来存储所有这些即时贴，所以需要一个服务器 T 还要有 
一些 cookk ■…-噢，等等，先别着急，我们完全可以用 HTML5 
Web Storage API 来做到！ 


web Storage AP 彳襻®荦，猓有趣，茶 
£1你绝对含瀟意， ㈣ , 


Pick up dry 

cleaning 






不再绕弯子了，下面就来使用本地存储。为此你要创建一个简单的 HTML 页面， 
包含所有基本部分:首部、体和一个脚本（或者可以直接使用代码示例中作为 
起步的文件 notetoself.html) 。 把这些代码键入到 <script> 元素中（自己动手 
键入有助于你记 住）： 


A 即时贴最重要的无非是你在上面写的文本，对不对？所以， 
首先存储一个写有 "Pickup dry cleaning " 的即时 


storage API ^ {S 金 发现别 4 P B ^ ^ 
饬左义 5 这个的象。 fl 用这个的象的_ 
軚及在利用底桌的本邊存儀 蓽铁。 


SfittttkVL 方法舷 S 个字符系一 
枣参數 t 它们将行 
怂鍵 〆 £片。 



項。不拥£孩存镩數字线的 
戴（不汶，我们罹糝舭金 S 
方泫克服 ti 个哦 «) ， 


lacalSiior«gQ , s©tItem( T, sticky _ 0 T, r "Pick up dry cleaning 1 ') 

使用 setitem ■方 沽* . 

弟 一个李 符净#袅4银數 

得見 你希豐的任何名李 f o 
|$圣_个字符率）子 u - 


第二个字得$1#望 
存本油存锌中存鰱 
醜。 
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这太容 易=了|下虱再 向本地存储增加第二 I 数据项: 



jfe . 




localstorage , setltemt^aticky^ 1 , "Cancel cable tv, who needs it now? l, >; 

务一 个谨. Z 菊说 ii . 巧:以值用仿喜欢 

个专 苑孝） ■伐— 

^ ^ 小薄 fi 後一 个也 





A . 既然在浏览器的本地存储中安全地存储了两个值，现在可以使用其中某个 
W 键从 localStorage 获取相应的值 D 如下： 


我们将从本他存镝得约鸟 
.鍵兵辟的 免…… 

f ¥) tf . 

var sticky = J.ocalStorage.g©tItem{ T, fiticky_ 0 ,r J; 

alert ( sticky ); 巧:： 〗 更有 iS —昼，下 面璉用 flUrt 

由 H 吳填 J : 殚出 印吋砧的 f £.. 


淡试一试？ _r 


确保将所有这些代码键入到 script 元索中，然后在浏览器中加载。 
我们的测试结果 如下： 







这4我们的 Jfl 诚岛中祛钱， sticky O 

__ 器规 放奶 I 


没持，戧们承认 ii 个利孑 SSJ^t 有豳 
来噂，很伕溅们軚金介绍一曲1 


布砉$的内容 
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本地存储如何工作 



当然，先在这里简黾说一下：浏览器为你提 
供了一个本地存储，这是你自己的计算机上 
的空间，就在你的浏览器中，页面可以利用 
这个本地存储来存储键/值对 P 你创建了一些 
键/值对，使用本地存储 API 来存储这些键/值 
对，然后可以获取其中一个键/值对在应用 
中使用。尽管 H 前这个例子还不太让人兴奋， 
但要知道，利用毎个用户浏览器屮的一点点 
存储空间，你确实可以做很多有趣的事情 
(相信你至少能有一些想法 ） ^ 

现在你大致有所了解了，下面就来详细地一 
歩一步分析究竟发生了什么： 




七 ♦ 


A f 先，翥记住苺令洌 Kft 布一卷本拇存銶，珥沭用皋存铴 
w 键/值对 . 




S 个瑰代刦》» 


/在后台邾有本嘁 
巧以用来 


本 
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在本地存储 




布7达令本 M 存鰱，你玎冰取一个鍵和一个值 {貉 系用字符苺形 
式），挖它们存铴起来。 


localStorag&.setItem{"sticky 一 0" , "Pick up dry cleaning") 

T - 

健用 SfitftCk 方 f 左皋冉健一个鍵 /(£ 的 。 

键甚 P ft 蕞 btp drij 

citavtly^ a 


的镶 / 徭的 n 



— ^ ^ UjG « Lst ：£ j ^0 e 

中： 財狀 狀畔 ⑽㈣ 
3 到 E 鞣东 o . 通出洌 祐器甚至 
f j V + 3 f ^ r 它们仍然係餐乂 






0 


然涪苒次逋用 setltftiiu 真存铴®二令鍵/铍对，迖一凌鍵 
为 mdcvj - * 值是 "Caiiftel cable tv , who needs it now? w 




本摊 fttt 


locals torage . set I tern ( M sticky _ l ,T t "Cancel cable tv , who needs it now ? H > 

V 1 现在笮 苒个徭 /分射的应 

jl j 馮个硪一的嫌 存味。 



通两 gelHeiH # 托定锇 " iffekv ^ O * € 会返馅迖个鍵/毡对的值 


i 

Pick up dry 
cleaning ' 1 



localSt : orage . getltem ( tf 3 tidcy _0 M }; 


getitem ■壸我一个键等子 ' stbtey_o 的嚴搏埯（如果存在）+ 
斿送©它的 d 


at . .获奴一个數掮场的，斿溲有埒会从本蟪存噠蒯险. . 我们 s 
对庙#定鐮的 
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关于本地存储的问题 


问: 


t /^ erei^re x\9 

Dumb Questions 


刚开始你说 M Web 存储 M ，后来你又开始说 H 本地 
存储 " ^它们一样吗？ 


答 


•这个 Web 标准正式的名字是 "Web 存储 w (Web 
Storage) ,但是大多数人只是把它叫做本地存储 （实际 
上，浏見器就是通过 localStorage 对象提供这个 API 的 ） s 
Web 存储实际上并不是这个标准最合适的名字为数据 
项存储在你的浏览 器中， 而不是存储在 Web 上） 。 不过既 
然这么取名了 t 我们就只好沿用了 a 你会看到我们会更多 
地使用本地存储，而不是标准称呼 “ Web 存储"^ 


问 


9 


Web Storage API 得到了广泛支 持吗？ 能肯定总能得 
到它吗？ 


答 


是的。实际上这是得到蛟好支持的 API 之一，甚至后 
退到 IE 8 都能提供支持，而1现在大多数移动浏览器都1持 
这个 APU 可能有些浏览器会存在一些问题，谈到有关内容 
时我们会及时指出，至于能不能确信有 Web Storage , 与往 
常一样 s 在使用 API 之前还是应备先測试一下，可以如下測 
试 local Storage : 

if ( windowl ^ locaistoirage ^])( 

// your localstorage code here . 


注意，我们測试时会查看 window 全局对象是否有一个 
loca 【 Storage 属性 t 如果有，则说明这个洌览器支持 
local Storage „ 

问： 这一章最前面你提到每个浏览器上有 5 MB 的存储空 
间。这 5 MB 是所有应用共用的吗？ 

I :不，实际上是每个域有 5 MB , 

^ • 你说过，不禰要涉及服务器，可是后来你又开始提 
到域 6 

没错,所有存储空间都在客户端管理^幻入域是 
因为 5 MB 会分配给来自同一个域的所有瓦面作为存储空 

等等，所有这些都在你的机器上， 

问: 这与 Googje Gears [或者可以在这里插入你最軎欢的 
专用本地存储技术1相比怎么样呢？ 


答： 


其他浏览筲存储技术并没有什么问题，不过 HTML 5 
的本地存诸现在已经作为标准 （ Google、Apple ^ Microsoft 
和其他公司现在都次可 Web 存储作为在浏览器本地存储巧 
容的标 准）。 


问 _• 


如果我对同一个键多次完成 setltem 会发生什么 s 假 
设我对 lt sticky _ r 调用了两次 setltem , 会怎么样呢？本 
地存储中会得到两个 sticky _1 值吗？ 

答： 不会。 localStorage 中键是唯一的，所以 setltem 会用 
第二个值康盖第一个值，下面给出一个例子：如果运行这 
个 代码： 

localStorage , setItemf ^ sticky _ ry'Get 

locaIStorage.setIterasticky _ VV'G^t Almond Milk”}; 

var sticky = localstorage , getltem^sticky _ l ff )； 

sticky 的值将是 "Get Almond Milk M , 

谁能看到我的本地存储中的数据？ 

:本地存储按数据的来游管理（可以把来源认为是 
»所以》例如， wiekecUysmart . com 上的每个页面可以 
看到这个网站上其他 W 面存储的数据项，但是其他问站 
(如 gtKigle . ccHn ) 的代码就无法访问这个存谜空间（它们只 
能访问自己的本地存储数据项> s 

^ ' 如果从我的计算机加栽一个页面，就像前面的练习 
那样，那么我的数据源是什么？ 

答 *' 这个问題问得好，在这种情况下,你的数据源称为 u 
本地丈件"源，这很适合用来进行測试，如果你可以访问 
服务器，也可以在服条器測试你的文件.这秤情况下数据 
源就是服务器的域， 



如果使用 file ://, 本地存储可能无法在所 
有浏览器上都能正常 工作。 

1 ： *# f 有些情况下，一些浏览器会要求使用 
WatCll It ! locaihost : 〃或一个托管服务器提供页面* 

而不是从一个文件加载，这就厲于这种 
情况 s 所以，如果你的即时贴系统不能正常工作，可 
以尝试从一个服务器运行，或者也可以尝试使用一个 
不同的浏览器。 
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在本地存储 


Jml 


这么说，我芎醎在 localStoraoe 中#鶬由眘，不过釦》我想存伸 
—个 ft 嚷7我-盧希®苷认使 ftlo 时 IStorafle 为我栴裏缜霣齣一 
个 购祐婁 成 ft # 伸骞岛令戤（螫戤） 和价栲 （淳点 ft ). 磷暹 

达令技术 ffi 不上码 7 



这个技术非常适用。 

没错，利用 l OC alStQi： ageT 只能使用字符串作为键稍值。但是，这并没有听上 
去那么严格。假设你需要存储 整数夂 可以存储字符串 “5”，然后在从本地存储 
获取时再将它转换回一个整数。下面就来看如何处理整数和浮点数 D 

假设你希望对应键 "numitems" 存储一个整数，可以写作： 


locals tor ag^. setltem C n munitacii &’％ 1 }; 


^ 一 f 十么 f 勿才 <7 ■&说不錄存簡 
«數嗜？ 


是的，看起来这里像是在存储一个整数，不过 JavaScript 知道这必须是一个字符 
串，所以它会帮你将整数值强制转换为一个字符串。 setltem 真正看到的是字符 
串 u l” ，而不是一个整数。不过用 getltem 获取一个值时， JavaScript 没有这 
么聪明： 

var numltems = local Storage. ga 111 am { IT numibema n )； 

在这个代码中, numltems 陚值为字符串 tt r , 而不是我们希望的整数。为了 
确保 numltems 是一个数字，■要使用 JavaScript 函数 parselnt， 将字符串转换 
为_个_数. 

___ 将⑦忽装在 一 个用中，它金龙掌符库 
1 / 转换 >6-个螯 

var numlteas = paraelnt:[localStorag^. 11 numiterns 


致穿 D 


niimitemg 


lo cal Storage, ae tl tem { 11 nxuni tems f ' t £i\unlt«ms); 


jnvascrvpt 费责耗滅 5 


如果存储浮点数值，从〗 ocalStorage 得到价格数据时，你可能要使 
用 parseFloat 函数： 读同样的让理.我们存鰱—个 

localStorage , setltem( if price T, , 9.99); 


var price = pars eFloa t {loca 1S tor age. get I tem ( M price ,T ))； 


滅个 r4 至數 s 
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本地存储就像是数组 


本储和数组是双脗胎码? 


本地存储还有你不曾看到的一面 lacalStorage 不仅提供了获取方法和设 
置方法（也就是 getltem 和 setltem) ， 它还允许你把 localStorage 对象看 
作是一个关联数组这是什么意思？是这样的，可以不使用 setltem 方法， 
而是像这样在本地存储中为键賦一个值： 

1 ocalStor 嫌 ge [ 11 sticfcy= "Pick up dry cleaning'- 

厂 \ 

ilf 的 鍵寿起 来轼係 I \ & f 靶 flfi 放奋斌 ft 诘句的右 a , 

存锔致银的索 


还可以采用这种方式获取对应一个键存储的值。语法如下: 



var sticky - localstoraga[ 11 sticky 0 T, ]； 


达脒緣值用 g 出 te 汉方: 法调見 


巧細叫..…，本泌 存锌中 祕 


不错吧？不论使用哪种语法，都是合法的 s 不过，如果你习惯使用 JavaScript 中的 
关联数组，这个语法可能更简洁，而 E 对你来说更可读^ 


不过先等等，迹有哝 


localStorage API 述提供了另外两个有意思的特性：一个属性 length , 还有一 
个方法 key。length^ 性包含本地存储中的数据项数 4 从下面的代码可以看出 
key 方法的作用： 

备 诉戠们 
UjcrtLstDinflge 中 穷多少 


备个數搞洚。 


Ifi t 我们值用婊透代公 If iacfliStotflfe 


的内窖（就薄一个搋通），4存达代 ii « 
过伐 中这闵吾个鑣（釦 ^ tich M _ 0 " > , 

后值用这个键对取和应的值。 


for {var i = 0; i < localStorage .length; i++) 


var key = localStorage«key ⑴ 
var valia* = lpcalStor»g« [k«y] 
alert (value); 

t 

试一试…… 4 不基対应备 
个教狨碣饵豹—个接邊？ 



方法含给达 LocflLstortjge 中各个蛊鵠项的 
键（如 \tickij_0 ，r , "stL^tey_i w If) s 

钱后利用这个镶 
S 弓以获舣免， 
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在本地存储 


tterei ^ r ^ no 

Dumb Questions 





使用 localStorage . key 迭代处理 loca iSto^ge 
时，会按什么颠序处理这些数据项？与我在本地 
存储中写入数据项的顺序一样吗？ 


务畏游欢 


答： 实际上并没有明磽定义数据项的觸 7 K 这 
是什么意思？这说明通过速代，你会看到本地存 
储中的每一个焚/值，但是在代码中不能依赖某种 
特定的順序，事实上，不同 的浏见 器对同样的代 
码和数据项会给出不 FJ 的瀨序 D 


想试试运气吗？或者是不是该说想试试你的水平吗？这里有一个 
游戏，可以测试一下你对 localStorage 的掌握程度，不过一定要 
专心 & 利用你目前掌握的在 localStorag 々中 获取和设置键/值对的 
知识，跟踪豌豆到底在哪个果壳下面。 

function &hellGamA() { 

loca IS tor age. set I tem ( Tl she 11 l ,r t T ， pea M ); 
locals tof&ge、aet I 

locals towage. se t It em (" she 113", 1, ampty T, )； 

localStorage [ Tl &hdlll u ] = M empty T， ; 

loca IS forage [ 11 sha 112"] = 

locals tor age [^shells 11 ] s ,r empty ，T ; 

var valuft = laca 15 tor age. 112 M ); 

loca IS tor age. s e 11 tem ( Tl she 111 1 % value); 

V 9. J . U 9 = loc^lStoraga . gotItem { 1 l 6 hell 3 H ); 
lo ca IS tor age [ TP sh4all2 lf ] = value; 
var key = T, shell2 T, ; 
locals tor age [key] = ; 

Ic«y = ， _shelll"; 
localStoragellcay ] = ^ empty ^； 
key * T, she 113"; 


可用 WT 空佥采记 


_ 个果壳 T 砺有魏£? 把 
你的奋 f 奚：这 f - 


locals tor age [kay] = ^empty 1 %* 


for (var i = 0; i < lopalStior«gfli v i-H-) 

var key = locaIStorage - key (x); 
var value — local Storage. get Item ; 


alBrt ( lc «7 + 


+ valu «>; 

p^, 伐也 以该入 运 个代 
、、砝 ■ 检查俅的蚤索 * 
n 碥, 着着鵷 S 4 
郵 个果壳 下®。 



锼 

m 

shell r 


sheltZ 


shettS 
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存储技术闲谈 

Fireside Chats 



今晚 话题: Cookie 和本地存储 

今晚我们请到了现任浏览器存储技术 - Cookie " 
及目前新兴的领先技术"本地存储 "u 




Cookie : 本地 存储： 

就是你呀，现在的大红人，本地存储。我在这个 
行当巳经闯荡了十多年了，你觉得你能像我一样 
吗？就好像你馑得不少_样。你还乳臭未干呢， 

小子，不是吗？ 

当然，你可以这么看，或者也可以这么讲，我就 
是根据从你的错误获得的所有那些经验建立的 6 


你知不知道多少个页面用到我？看过关干你的统 
计吗？ 

再过几年看看。事实上，我的目标是帮助建立浏 
览器的新一代 Web 应用。你提到的那些页面，大 
多都只是页面而已 

嘿，要知道我可是无处不在，哪里都有我的身 
影！我不会考虑是桌面浏览器、设备还是移动浏 
览器,不管浏览器有多老，你都能找到我^ 

我已经迎头赶上了。在所有 HTML 5 技术中，我得 
到了最好的支持^ 

让我们拭 R 以待 Q 那么你觉得你有哪些方面强过 
我呢？我的存储做得已经很好了„ 

呵呵，我真不想当着大家说这个，不过你确实存 
在大小限制的问题。 

我不知道你在说些什么。 

嘿，是你开的头。你很淸楚你只限于 4 K 的存储空 
间，而我是你的1200倍！ 
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Cookie ^ 本地 存储： 

是啊，我很轻巧，灵活， g 至可以说是敏捷。 

哈， 说得真好听。 你跟真正的 Web 开发人员聊过 
吗？你是有一些特点，但绝对不是敏捷。假设你 
要做统计，使用 cookie 能统计出开发人员因为愚 
蠢的错误和误解而损失的时间吗？ 

没问题呀，我很开放的，你想放什么都可以在我 
这里存储^ 

你实际上是说，你根本没有任何数据格式，所以 
开发人员必须发明一■种新的机制在 cookie 中存储 
数据。 

嗯，键/值对筧是重大的创新吗？ 


<窃笑> 呵，没错，你把所有东西都存储为字符 
串！干得真好！ </窃笑> 


好吧，好吧，过十年再来找我吧，我们倒要看看 
你能不能经得过时间的考验 & 


等着瞧吧，等他们说，“哈哈， 5 MB , 这就是你 
的优势吗？”那个时候你会哭着来找我的 Q 


关于存储我们并不需要重大创新。键/值对工作得 
很好，很简单， 而且 适用干很多计算应用 a 


从字符串可以得到很多东西，如果你需要更复杂 
的，我还有很多其他办法 n 


噢，不信咱们可以打个賭。面对现实吧 f 从一开 
始你的命运就已经注定了 # 我是说，想想看，谁 
会把自己的孩子叫做 Cwfcie ? 
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即时贴应用 


处理印时贴 


既然你有点时间来尝试 Web 存储,下面再进一歩扩展这个实现。我们 
将创建一个即时贴应用，让你能看到你的即时贴，还可以增加新的即 
时贴。在构建这个应用之前，先来看看我们要构建的应用最终是什么 
样。 



: — 科方法来坩加弟的 
吖时？ ^ 的鉍鏖 射濃一 个包禽 
个檢入樓 jb — 个接 扭 的表荤 s 


这个即的铋在用金霣 
iju ? ⑽的便 
条,#尤埒《 们嫌 加新 
的值条。 


本地存储 


至壶 11 Add stbtey 

NoUtoSdf ’ 接兹的. 
含知 Lo&fltsto 成 ge 律加 
—个斯的印 ㈣ 



噠中 S 经 奄即吋 躲栽们 
綦 望存如 載历®的姹移罨利 ，吡 
如现有的 a 馮个印的貼. 


«：nn 


„. : ■: ' . _ ' -，•-•»■ 


Note to SeJf 


U! lotBJho*r/™itiih/H«<>-F I *1C ■■HTML5/eM ， r9 fn&m^MiMm\ 


— — 


L*L5/ch^n*rg C MOr 
• •， •*•" • r 



jAM STielrv Not# t& Wf 




Pick up dry 
cleaning 


1 


Cancel 
cable tv, 
who needs 
it now? 



如果有 靶的印 时鲇， 
栽们 e 金巷约 f 夺相 

§，， 芍 [ r / 命 DOM 巧 
备个即 H 贴 坩加一个 
新; t 癔。 




们将透代钍 If 
U^frLstx) 叫狀中的斯有 
即的蛄 1 4挹它们 iT 


^ 




记 d 这薄个印的睬的该 分則 
展 和 ^ticku i " a 我们 
个约金 : ^^ t,J 
该的，后缇 f 教含违 ^ 
咖啕3等， U_ 



我们将健用即 ㈣ 哒相定 辑式， 價宓 
们屬上去軚懞 AiE 的使条 
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创建界® 

首先，需要一种方法输入便条贴的文本。如果能在页面 
上看到就太好了，所以我们需要一个元素来包含页面上 
所有便条。 

下面编3— 些代码来完成这个工作，先从 HTML 标记 
开始，根据你现有的 HTML 文件，增加一个<【03：1>元 
素、 <ul> 元素和 CSS 链接，如下 所示: 

这差我 们的主 HTML 亡#。 



、參在存储 


< f doc type .html> 
<html> 

<heod> 


我们将加入一哆 CSS , 让它们毛 i ： 去舦洋灸正 
的_站。这本韦4不您的 T 不过如 
「 莱來龙 ㈣ 以查蟋攻》她 


<title>Note to Sftif</title> 


<mota chars© t= w utf- 8 ft > 




<link rel =lt stylesheet 11 href= u notatosQlf. css M > 
<script 石 rc="notetoself • js^X/seript^ 


戧 们 将把所句扣移 f ) 之 
4 “ i ^ tfitoseLfjs ' 1 中。 


</head> 

<t>ody> 

<fonn> 




个表购户疏 


弓以餘入 


<inptit typB= ,f text" id =t, note 一 text" >■ 

<input typft= ,f button" id=_ ， add—butt 加 w value= "Add Sticky Note to Self u > 
</forra> 

爾屬 4 . 界菊的某个话赛放 f 苎们慜 T 
<ul id- ,f stickles M > 的站 ― 錡以我们将您它们放存—个无 

* </ lll > \ .專 #*) 表中 g 

</body> 

</html> 


♦• J 用 ass 使备个糾庚 

以細 ㈣ 
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编写即时贴 j a v a script 

现在來增加 JavaScript 

我们已经有了页面所需的全部内容，而且 locaiStorage 中也已经有两个便条 
贴等着显示，下面就在页面上显示这两个即时贴，首先从 1 <^脱 01 ^ 6 将它 
们读出，然后放置在我们刚创建的无序列表元素中可以这样做： 



远®加栽 的- 我们 将该死 




I 


- § 食 A^Lo&aLSt ： orfl0Ci|t 

驳吒有现冇的印的蛄，冉 
洼过 DOM 靶它 ffl 螬加 I ■) 


window f onload 


init 


< kI > 


function Ini't (^ 

for (var i = 0; i < localSiiaxagfi, length; i++) 
var key = l&calSt.oz'agQ, key {1}; 
if t key. substiring (G , 6 ) 坊 ^ sticky''J { 
var value = localStarag^ . getiltem (key) 
addstickyToDOM(value); 


錡 tlfcj 透代处琿本祕存鵷中 
f 的辦笱 M 韃碭。 



) 




如蓽确贫 4 一个印吋贴， 
W 获奴它的张 ，4 (( 1 ^ 
ISOM ) 坩加 I 、) 5 蘅。 


然后检杳數掮场的 键&盃 
V / 矸決，來碥该它 

!—个即的姑^ ^6H £M(A^ 
fit ? t® p bc^LStCMTftgi 中芍能 
迳存镝 git 蝕蛊戏珣，壬不仅 
仗袅我们的即吋贴（稍后食介 
绍£多有英内窖 ） 0 


所以现在需要編写 addStickyToDOM 函数，向<111>元素插人 便条： 




涔入值 条贴的殳本。戧们兔 1 #无序刊表釗瘥 
^ - 个列表场，疼肩插入这 个利表 珀 6 

function addStickyToDOll (value) 

var sticlties = document * ge tElementBy Id ( 11 a tickles "} ; ^ M J ^*, 下 ® 得 S_J stUteU^ 利表走縈 。 
var aticlcy = document. create£lementt T, li ,< ); 
var span = docutaeiit:.creAteElen3eni:( IT span M ); 
span. sQ-tAttributeC'cl^s' 1 , "sticky'*); 

span, innerHTHL « value; < - 设 B 色含即的姑丈本的 sp ⑽的由容 

atick^.appendChild(apan) ; 
stickles. appendChi Id (s-txclcy) 

} 


- 个刊表 ; t#_ 茬安类 4 

J (Wfi# 愛样 

a). 


将这个坩加到 J 'stbkiy" U. 再把 ii 个 
ii# 加 f*J "stbtetss" ?']4to 
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爯采戗个测试〖 

将这个代码键入到你的 script 元素中，并在浏览器中加载， 
在浏览器中加载 页面时 会得到： 




m 



# 


hlf 


Wd Sliclcy to 5#<f 


Pick up dry 
cleaning 


Cancel 
cable tv, 
who needs 
it now? 


— 

1 f 


■■■■■■■■■■■■■■■■■■■■■I 



完成阁户界 i 

现在要做的就是让这个表单起作用，能够增加新的便条。为此，需要 
为 "Add Sticky Note to Self" 按钮点击事件增加一个处理程序，并编写一 
些代码来创建一个新的即 时贴。 以下是增加处理程序的 代码： 


function init() 


把 ( i 个 rt 接增加 f i } 基數 r 


{ 


/ 



下否孩奴 ' Add 
Stietey Note to 
接纽的？ I 用。 


var button = document. getEleroen t^yId ( "add_bu , k'ton 11 ); 


button.onelick = createStlcky; ^ 



// for loop goes here 


IvUt 中的 M 含代铎侈祷不 t . A 
5 爷约蚨痒(托 .& 池少政 _) t 
不* t JL 


科婷这个軲狂点逢事 4 
坩加一个赴雄锃存 s 揭 
Ci 个 ii 理秸淳命名的 
triflt&stlcfey r 
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用代 码创建即时貼 


下而增加代码来创建一个便条贴 




堯击益纽的 ，含试用这个理 


它 芒茏孩舣表掣丈本栺 

厂 i 本。 


^ 1 '% 

^ v # 
令僉麗承參 

丈本栝中的 


function createSticlcy () ^ 

var value - document, getEXementByld (" note_text 11 ) * 
value; 

var key = ” sticky " + local Storage. length; < ―栝后噱 i 为 ii 个町的砧鈇 1 _ 一个呤 — 

' 的從 。 下®後用 ' stbtey ." 作錡镔 


localS^borage. setl^emfkey, value) 


adds ti c kyToOOM{value ； 



新之本 来表矛这个即 


后這用 a 个 u 免 
Loc^Lstcrw^fjf — 个新 


缰，斿1茲螯个本地#锌的咅度-从 
系构咸 锺名. 总含不蝌遂缯_ 的不 


爯傲一 个测试 f 




现在已经真正做到了交互!在浏览器中加载这个新代码 T 输 
人一个新的“便条贴”，点 A 或轻击 “Add Sticky Note to 
Self " 按钮。你会看到这个新的便条贴出现在你的即时贴列 
表中。我们会看到这样的结果： 


〆 


( S 现4 9以 it 士 4旅朽3 . 咢®®来- 
你的印时玷庄在这藿粵着饬! 




V i\^»*w^b»K l rti#4-f ni-"«TPi Vi 


lI|miipijh«i l irt 


Pick up dry 
cleaning 


VmKV SMMjii 

Cancel 
cable tv, 
who needs 
ft now? 


( i 蛊制试这朽的遂 
粱，苇起來不错！ 




H 个即的 U 的鍵蓮 , 
这扈本蟪存镝的在度 (tf 加运个卯 
_< n£zm 島 造油 

威的。 


Suy another 

Apple 

gadget 





试 t 竽两别 n 器,恿 4 妒朽 孖达个 
主4。你 (3 含4妇这咎即的始 
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tJiBreifire 119 

Dumb Quest-iQUS 


令、 


在 存储 




问： 




为什么我们要 测试査 看各个数据项的键是不是以 
串 " sticky " 开头? 

答： 应该记得，一 ^ 域（如 ; ipple.com) 的所有页面会看 
到这个域中其他页面存铺的各个数据项，这说明，如果我 
们对键的命名不在意，可能会与另一个采用不冏方式使用 
相同姑的页面发生冲突。所以，我们利用这种方法进行检 
查，在用它的值增加即时贴之前，先确保一个数据项确实 
是即时贴（而不是一个顺序号或者一个游呔等级）。 


问 


»如果 locsIStorage 中有彳艮多数据项，包括大量不是即 
时贴的数据怎么办？迭代处理整个数据项集合是不是太低 
效了？ 


答 : 嗯 . 涂非你所说的确实是非常非常多的数据项，否 
则我们很怀疑你会注意到效牟的差别，不过,你说的也没 
有错， 这样确实不太高效，可能会有史好的方法来管理鍵 
( 神后我们就会讨论这样一些方法 ）. 


问： 


我不明白为什么使用 localStorage . length 作为键中的 
即时贴 序号： 

^sticky ” + loc a 1 Storage. 1 enrich 

为什么要这么做？ 

答: 我们需要一种方法来创建唯一的新键 3 可以使用时 
间，或者生成一个每次都会递增的整軚 s 或者，正如我们 
所说的，可以使用本地存鍺的长度（每次增加一个数据项 
时，长度都会递增）。如果你汰为这样有问题，后面我们 
还会再做解释 n 如果你还没有考虑这会不会有 H 亂，没关 
总之我佝还会再来部此的》 




我在 Safari 中创建了一太堆的即 时貼^ 然后切换到 
Cflrome , 在 Chrome 中看不到我的即时贴了，为什么呢广 



答:每个浏 t 器会维护它自己的本地存储所以如果你在 
Safari 中创建了即时貼.就只能在 Safari 中着到它 fi 1, 

1^1 -* 我刚刚重新加载了我的页面，现在即时贴顾序居然 
不一样了！ 

答: 增加一个新的便杀贴时，我们的做法是把它遠加到 
便奈列表的最后，所以它总是位于列表的末尾。重新加载 
页面时，这姿便奈会按在 localStorage 中找到的颇序来增加 
(要记住，不能保证采用某秤特定顺序 ） I 你可能认为这个 
牖序就是数据项增加到本地存储时采用的顺序 T 或者另卟 
某种合理的顺序，不过，不能指空这一点。为什么呢？ 一 
个原因是 规范并 没有指定一个顺序，所以不同的浏 E 器可 
能会以不同的方式实现这个顺序 3 如果你的浏 見器 确实按 
你可以理解的顺序返罔教据項，那你根幸运，不过不能依 
赖亍这个领序、因为你的用户的洌 見器 T 能会按不 F1 的方 
式确定数据项的顺序。 


问: 

答: 


问 

答 


我经常使用 “ form ” 形式的 for 循环 g 这里能用吗？ 

ii 令透代 让 S 

当然可以可以这样使用 > 中的$个禮。很方迻。 

for (var k«y in loc a IS to rage) { 

var value = local Storage {key]; 

} 

如果我不想要某个即时贴了怎么办？能不能删除？ 


当然，我们可以从 localStorJige 使用 localSiorage. 
rcrtiovcltem 方法刪除教据项还可以从 localStonige 直接使 
用浏 ■ 見器控制台娜除数据项 D it 两种做法在这一章都会介 

绍。 


杂软软_ _ _ 

，♦办 W 萑 W 

裉据实现这些即时贴的-方式，如果用户能随便删除一个即时贴，我 if ? 的命名机制雒可能存在 
问题 D 你能想出这个间题是什么吗？ 
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诊断詞览器存储 


t 要蜇傳 一 T ， 来点预定服务 

如果有一个 T 具可以直接查看 localSkorage 中的数据项，是不是 
很好？或者，如果有一个工具能够删除数据项，甚至在你调试 
时能完全清除本地存储来从头开始，那该多好。 

嗯，所有主流浏览器都内置有一些开发工具，允许直接检査你 

的本地存储 D 可以想见，不同浏览器中的工具各不相同，所以 

这1并不打算逐一地全而介绍，我们只会为你指出正确的方向/ 

以便你进一步深人，明确你自己的浏览器的特定细节。不过， 

作为一个例子，下面来看 Safari 提供的 工具： i 

更向况軔版本的洌褚 


今 Q 邾毯， 

别新输出到栳 t 

器 tfy tocatS toza^e 


我们 3 绞走击 J 

杉 H 乘 
查考 locaLstora 队 




赛这 现 . 忱 
我们写页 ® 的1度任 
f 孕 f 



s 铱器援偁的 
幵发 XU , 


A ^ Web {nsp«i：tar — http ： //locaihostA-8eth/HTML S/LotalStoragc/notetoself.html 

mmm, q ^ a c ^ ^ 



Eterr>ents Rwoufcei N^tw&rk Scripts TlniJ^ipe Prohles Ai^c»ts Como J c 


Search keiourcei 


valur 

CHiver 



tP~ 1 FraiTHiS 

• Patjbai&e 霉 

t . icca\ Stof ^ g « 

iMhirr_T^jiMi 

► ^.on^raoe \ . 乾 ± 的金 S5 与这个 》 

► Cookecs 

► r A Cache 


stickv t 2 
sticky 0 
sticky J 


Buy amsfticr AppAe g,adgcT 

P t*t jp difv clMmng 

Cancel cabl-e Iv, ^bo r*«ed5 rt new? 


if ! 本蟪浮锌中备个數 
拷碣政 S 的锼 〆 右的。 




兵联的本蟪存絲 


后鄱金付论 Ci 个内容」 
扣菜 f 震，迳有老式的 




右键#,违存噼中的#个 
數掮场，可以在这个工 
总中古 MMM 或谢啥 a 个 
鼓 M 场。 


a >: 


c 


本地 存保的谏。戧们僅 用由 
httpy / iocefih^tU 堪 的本地 丈蛘 ，不 
^ - 七粱饬4,个托管 M 务器 J ： 谢 
读 ， U W ! —个域.名 。 



在 Sflfflvi 中，芍街这#工只 
重射加 故 storagt 视疼 I , S 芍以视 
铨蚵选擇的數掮场。 


要启动或访问开发工具，正如我们说过的，对于不同的浏览器你要做的吋能有所不同。在 
浏览器中力 II 载 http :// wickedlysmart , com/hfhtmlS / devtools - html ， 看看在你的特 

定浏览器上具体采用什么做法。 
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在 存储 


fa 劫手卯 Y 维护 


还有一种方法 可以淸 除数据（稍后会看到，也可以逐个地删除），这需要 
你自己利用 JavaScript 完成一些维护工作 p LocalStorage API 包括一个很方便 
的方法 dear , 它会从你的本地存储删除所有数据项（至少，会删除你的域 
中的数据项> K 面就来看肴如何在 JavaScript 中使用这个调用。我们将创 
迷一个新文件，名为 maintenance . html 。 创建这个文件之后， 增加下 
面的代码，我们会逐步分析它是如何工作的。 

i 

< I doctype html > 



这爰一个 M 辟的 Z ^ 
工 B 葙 f e 


<head> 

<ti tle>Main tenance< / 1:1 tle> 


<Sneta charset— p, 

< script > 

window,onload = function{) { 



var clearButton = docuinent, getElemantByld ( 11 clear_button tp > ; 


控纽‘达个代砝含衿这个搞 
钴加一个堯忐让 瑾伐薄 ° 


) 


c 1 earButton , onclick = 


function clearStorage{) C 
localStorage.clear(); 

} 

</script> 

</head> 

< body > 


clearstorage; 



n 德纽的. 
fiUa rstc^a g e 函盘 D 



这个焱數辦激的铽 I 钃用 UicaUstarfl ^^. 


數洱场 r 


<foxm> 

<input type= T ， bu11on n id= ,f clear_button M 
</form> 

</body> Ciit 洩们的祐纫。如壤 f 龙 

</ht3nl> JPj 餘 LocflLstorflge 中的所笮内 

審，郝守 W 璜用这个丈殍（这 
对 * 该根有好钍） 。 


val ue= f, C lear 


输人这个代码之后,在浏览器中加载（对十我们的即时贴应用 ） 6 
现在可以安全地清空你的 〖 ocalStoragh 可以试一试！ 一定要确保 
已经了解幵发工具，这样才能观察到变化。 


storage “ /> 



这会删除域中 
的所有数据 

m 

如果你有一个 
超级有价值 
的本地存储与同一个域中的 
巧一个项目关联，运行这个 
代码后，1尔会丢失所有数据 
项 ■> 好好想想吧…… 
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简 时还在利用我 ^ 
掌繡的扣识釗建我们公蜀的析购 躲车虫 ft a 我的即对躲虔用不61疋常工 
{% 1 . 我 ^ Safari 开省工具金 il 【 ocaIStora 砂对，龙轵我的即妗粘編罟”团 
和.观在布 _* tIekvJT 、 " itteky^r , "* tleky ^4* . " ttlckyj "； 
州 0( cyJ 5_ ， " sticky ^ lB * , _ r«dcvjr 、 m $ t \ tky ^ D 我布一种苺 
踅，岌生这种情況 1 锣为我在创建印时鲇的阉对还在 loeal 财 orage 中射違;？其 

他数埯項。达到 EJI 怎么 ® 單？ > 


Q 


—个问题 


% 


哈，你发现了一个重要的设计缺陷 9 


没错，是时候澄消这个问题了：到目前为止，我们 
已经建立了一个很不错的小应用，但前提是没有向 
loeaiStorage 引人其他数据项（比如 Joel 的购物车）^ 一 &个 部 
且引人了其他数据项，我们用来跟踪即时贴的整 个帆制 很好； f 則， 
就不再奏效，或者,至少不能很好地工作了。下面来告 
诉你酬 ： 


酋先.我们的俚彔貼 是嫌认 0到印时貼歉3 (滅 I )來鵷罟的 


f stlcky_0 M "sticky. 


'sticky_2 t, “stlcky_3” “sticky .4_ 


s 个 it 条蛄，杉记# Uo 〜 


曩增加一令新的即时貼，我们会 统讨麥 M 存恸中的歡楣碩个 
抵' #从达爹数开曲创連新的 

var key = ''sticky _ + localSi:orage.length; 

濰袅示箝布即对 酏， N 从0孖免，迭代处理專 M 存锌中的所布 
歎 Ji 項. i 到本 M 存鋅的长炙（*1): 



,, atlcky_5 tt 





‘stickyJT "stlcky.l" w stlcky_2 M 




3，_ w sticky ^4" “ sticfcy—F 


f l ) 的各个便条。 
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现在孢 Joel 的歉猓瑣认栝的舲拍车增加剌 Loca 炫 forage : 


o o o o o o 

—stickyJT "sticky_1 M 4[ sticky_2 ,t -, stichy_3™ 、此吵—斗" H sticky_5 rt 



存储 

a 翟: ijpd 存他的鉤物$代运中優 Ml 


的數典场 4 

a 



O 


"shopping ^shopping 
cart item 1 p, cart item 2” 









T ® 创違一个新的昨 村貼： 

var key = “sticky—’ + localS^orage .length; ^ 

广令 “sticky „9 H 

合 J 4 獅的咋的轱 时. 本蟪存觭的在廑现存兔 1 辦>/_戟们含创遵一个名 
^ ' 的 ft 条。嘌. f 起来不太对鉍 fi 

彙饕迭代处理筠时贴來霣示时，我们弑通到麻烯？； 



O O 






sticky_O p, -sticky.r “sticky _2" ■■sticky_3” **stlcky_4 M w sticky_5 





长 /t 现 4 & ±o ( 教们刪垅加 1 j 一个新的郎的坫 ） t 的以认 on 代到 j . 
荽矛从 stletey o" I*) stbl^y_^ 的各个 Sp 的结 . 3 


唼吻 ,. 4 沒有 
__ & t—y ■ 或 、 tUtey_2 


parpen your penci 


il 


你认为我们当前的实现在哪些方面可能会有问题，请在旁边打勾 


□ 如果 localStorage 中有很多数据项不是即时贴，显示即时贴会很低效。 


如果另一个应用删除它自己的数据项而导致 localStorage 长度变小时、即 
时贴可能会被 setltem 覆盖。 

□ 很难很快说出到底有多少个即 时贴； 必须迭代处理 localStorage 中的每一 
个数据项来得到所有即时贴。 

□ 用 cookie 吧，肯定比解决这些问题更容易！ 
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存储 




龟 i 












釦粟我能在 loealStorafle 中存 铽一个\_^ 
数钡 法多好 9 玎冰阁它 来保# 箝有 印时貼 
的鍵， 违可从很窨鼉摊钤道存锌 J 多少令印鰣貼 
不过我们邾知 aloca 丨 Storage 只陡 存蒱字 符每.所 
以导 管存鳍 數纽钉 能垩个 美好的 梦爆， 俚我知 埴 
达 Ri # 露夹孖…… 
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在 r 存储 


达个技术箱实省 .. 

我们没有撒谎，只能存储字符串作为 localStorage 数据项的値，这一点确实是真的， 
不过这并不是全部，因为在具体存储之前，完全可以把一个数组（或-个对象） 
转换为字符串 6 当然，看起来好像是投机取巧，不过这确实是合法的做法，这样 
就可以在】 ocdStomge 中存储非字符串数据类梨了 ^ 

我们知道，你希望现在就深人 T 解存储数组的细节，不过在此之前，先来一步一 
步研究如何利用数组解决我们 （和 Joel ) 的问题 s 

先后坦 一步，假 iilocalStorage 中€6个 8 PH 粘 r 


o o o o 

l+ sticky_(T ktickyj” “sticky_ST _‘sticky_3" 




布一个 歎组* € 灼 " stlcklesArraY " : 


o o 

w sticky_4 rt "stlcky_5 p, 



印的蛀和印的贴钕通邨存钵 



■■sticks Q^hstlckv 1 ,, l , sticky 2" I “sticky 3 M | ,, sticky 4”|“sUckv 5” 

"stJckies Array" 


印 W 蛄數组中的备个; t 素 
个虾 时站的.禮 :： 


现在采增加一个新的即时貼 e 钧达个 RP 对贴为 M sticky . 灼什么会有达么性异 
的 一 个编咢嘬？ ©为 我们 不苒兵心它叫计么：？，只 S 它是难一的就行 & 所 X ， * 壜加 
达个印时貼，我们可呔命歉姐嫌加 . 链后灼这个即对玷存储一个數痗 
項， fit 偉之箾的做法 一 如 rm 彔： 



U ^ aLstomge 中多5 
―个 sp 的站。 


o o o o 

“st*cky_(T u sticKy_1" H sticky_Z ,|r "sticky 一 3” 


o o o 

“sticky_4 CT u sticky_5" **sticky_815 ,r 


尹个 卯时玷 ： 它们的馑不再 tl , P ..# 求係讼嘈 一 。 


"sticky 0" hsticky 1”hstickv 2”hstickv 3" I "sticky 4 叫 “slickv 5" I "sticky 815" 


d 个卯的贴教 m 护展 


" s | iCkieaAfray #, 
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使用数组重写即时贴应用 



使用数组重新实现应闲 


ok , 我们大致知道了如何使用数组来 记录我 们的即时贴，不过 y 面再更进一步，确保能 
迭代处理和显示所有即时贴。在当前的代码屮，我们会在 init 函数中显示所有即时贴。能 
不能重写这个函数来使用一个数组呢？先来看现在的代码，然后再看如何用数组做出修改 
(希望同时能改进代码），先不要键入这个代码，我们只强调现在需要做的一些修改，但不 
能保证这个代码安全到万无一失。稍后会介绍保证安全的内容。 



之前的代码 …… 

function init () { 

// button code here ... 


这4裁们康來的代砝. 诼# 子印吋蛄昶 
~ - 宅的名孝， itUfey o s stUkty i 籌…… 


4 ,这太钆了 
SS*^ a 


for (var i ：= 0; i < local S t o rage . length ; i ++> { 
var key = local 3 torage , key { i ); 
if ( key + s * ubstr (0, 6) == " sticky ” J { 

var value = locals tor «getltem f key ); 

addStickyToDOM ( value ); 现.存我 € 私 ii 3 f d 9 钱全法网敁 ® 巧如 


) 


f 樣湖中數对场的个數 来‘名 
4不较靖定存在相在的 Sp 时姑. 


改进后的新代码 


function init() { 

// button code h^re.,, 



宅先 JjUccMStwa 少获蚁 


var sticklesArray — 
if {! stickiesArray) 
stickiesArray - 


localStorag^T 


Cl ； 




st^ickiesArray"]; 

f 14 係 kcaLStorfitgt 中冇一个教钽。 
—个 $ 放通。 




for 


locaIStorage. satltem( M stickiesArray 1 % stickiesAr may ); 

达代让理这个數组 

0; i < stick!esArray, length ； i++) { 


var i 


var key - stickiesArrayfi ]; 
var value » localStorage [key]; 
adds t^ickyToDOM (value) ; 

t 

然后把达个 任增釦 列办 0 M . 就像前 
® 礙的—样。 



数铂中的各个光彔分糾爰一个卯 
时鲇的锺，我们 f 值用达 
个 M JLCU>&ci Lstora g e 较奴相左的 

數涔场。 


触 ;饬 s ；r ■知® 如 
何在中存倚 
和获驳蛊组，所以在 
我们给出 SI 体代铋 Z 
前 gw 把它赛 m 弼 
代砝，必娥对 ii 个侉 
代砝傲一个榷0■的奵 
免, 它为翁！常 iriL 
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在本地存储 



还霑要确定具体如何在 localStorage 中存储一个数组 6 

你可能已经猜到，我们可以使用 JSON 来创建数组的一个 宇符串 表示，如果是 
这样，那你猜对了。_旦想到这一点，就可以在 localStorage 中存储数组了。 

应该记得， JSON API 中只有两个 方法： stringify 和 parse。 下面具体运用这两 
个方法来完成 init 函数（在学习后面的内容之前，先对照检查本章最后给出的 
答案）： 


.function init() { 

"button code here, P . 

var 9ticklesArray = localStocage ["s^ickiesArray 11 ]; 
If (f si : ic ] cleBArra ^}( 

s tickles Array ~ []; 

locals tor age. se-tItem( M sticltiesArray ,T , _ 

} else { 

A 

st icki.es Array =_ (stickiasArray); 

) 

for (var i — 0; i < s'tickiesArray.length; i++) { 

var key = stickiesArray [i]; 
var value = localSt.orage[)cey]; 
addSt r ickyToDOMtval j ae}; 




( stickiesArray )); 

我们 if 知 J H 个^^孑句-©衿如 
羃从 U ^ i * Stt?r 叫 t 得 f，) 數铟，伪兔 

高孑4一个教组）。 



转换 creaf eSf ie ky 來使用数组 

这个应用就快要完成了.现在要做的就是修改 createsticky 方法，你应该记得，这个方 
法只是从表单得到即时贴的文本，在本地存储，然后显示出来，在修改这个3数之前先来 
看当前的 实现： 


function createstickyO { 

var value = document.g«tElementById( ,T no,value; 不 ^ 麦用 Loo^lSt^ age 度来酱 1 J 镇 
var key = "stlckyj' + locals tor age. length; j _ 一 _ ^ 我们 3 绞卷 H 这食 _ 瘃同抵现存 


localStorage.setttom(key, value); 

J ^ -- 

addstickyToDOM (value ); 


栽们 f 屦釗達一个更巧咱—的.雄 ： 


还電龙将这个印的坫坩加到印时蛄廬通中^ 4靶 
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增加一个唯一的 


彿些 f 要修改？ 

createSticky 中有两点需要修改^首先，我们需要一种新方法为 
每个即时贴生成一个唯一的键 6 另外还需要修改代码，把即时贴存 
储在 locals torage 中的 s t i c k ie s A i : ray 数组屮 

0 需要为即时贴创建一个唯 ™ 的键 

有很多方法来创建唯一的键。我们可以使用日期和时间，也 
可以创建 S 杂的的随机64位数，或者在应用中使用一个原子 
时钟 APL 嗯， 听上去日期和时间就不错，是达到这个 R 的 
的一种便捷方法。 JavaScript 支持一个 Date 对象，它能返回 
自1970年以来的毫秒数，这应该足够唯一了（除非你要以非 
常快的速率创建即时 贴）： 

f 劍逋一个 Date 时襄，然后琿 f ) 

I 必前时匇 (毫枯數） 4 

var cuirrentDate - new Date { ^; 

var time = currentiDaLte.getTime (} 

var key = T , stiqky _" + time ; 

" 、 

然后将 ( i 个毫#蛊 ( t 加 fj 字符 

事 stUfey ." 后泰來构淺鍵 a 


浚 € 釗 sl — 
个4 —键的 


tf > ere|fire no 

Dumb Questions 

怎么是自 1970 年以来的*秒数？ 

I :你可能乙经知道，毫秒就是千分 
之一秒， gefHme 方法会返回从1970年 
以来的总毫秒数。为什么是〗970年？ 


这是由 Unix 操作系统继承来的 t 它就 
是这样定义时间的 s 尽管这并不完美 
(例如，1970年之前的时间会用负数表 
示），但如果需要一个唯一的数或者要 
在 JavaScript 代码中跟踪时间，这确实 
很方便 u 


问： JSON 类型的这些解析和串化工 
作是不是不够离效？如果我的数组非常 
大，那么存储时是不是效率也很低？ 


理论上讲，确实是这样，但是 s 
对于一般的 Web 页面编程任务，这往往 
不会成为问題，不过，如果你在实现一 
个正式的应用，有很大的存储需求 t 可 
能会发现使用 JSON 将数据嘈与字符串 
来回转换时会有 问题 n 



需要把这个新即时贴存储在数组中 

既然已经有办法创建一个唯一的键，还需要 存储对 应这个 
键的即时贴文本，并把这个键增加到 Stic kies Amy 。 下 
面介绍如何做到，然后再把所有这些代码集成在一起。 

右羌获奴即的砧蛊闼。 


var stickiesArray = getSliickiesArrayO 
localStorage ^setltemikey, valued; ^― 
3^ i . ckiesArray , push { kQy ); ^ 


耷 （ i- 页） uit 蚤 . 數中的谳:_去不同 ， iif 不 
4 1 炎列出得 H 和检查的代轉 , 
我们将釗達一个妒蟲数劣威这个工忾。柏后 

然 M 薄往 f 一样 t 存砵領知扣应的 
(不迮龙 璉用 戠们的斛键）。 


local Storage. aetliiem ( n s ticki esArray 1 ^ 


达个锾湟加利 spi ^ 銶數祖的末罨. 


JSON. S'tri.zigi.fy (s tickle sIVxr ay)) 

—个字得串。 
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现在来集成所 # 这些 基丁数 组的新代码，包 t 
._^P c r e a t e S t ic k y □ 为'此 「首先 栗抽象屮这两■: 

■ 个•函数 +. 都需要的一小部分这部分代妈用.年.从 ■ ;: 


ipcU 非 ora _ 获取叩时贴数组。你徉 ipijt 中已今见过 
这些伐码，.在 greateSticky 中运耍用到它。下 fe 就取出_ 
这部守代码/激： 专故在 77^名为扣 t^ticWesAr ri ^^ 
-方法丰;:之前我们 S 经■详细分拆迂这些 ft 码:唧以这不和 

«7 , ■ ■ ' ■ ^― 3 ■ - . ■■ 一 ■ ■ ■ _, ‘•■■■• ■■■— ■ . ■- : „ -T 

-容对你来谠应读 .4 陌生； ..:...： 

•r • . ■- 

■ ■ - 

function getStickibsArraYO ’： I .. _.. 


.；■ . — .■_ _ •- ■ • . - . . .. 

^ tbfeksAft^y " a ; -"- 


. _ ■■•■•■ 

yk± a tickle aArr ay. - locals torage.get Item ('sti cki 窃导 Array ” h' 


if (! strickiesArray) { 

_■_ _ • " . • ■ … 

atiCkiesAxray = []';： : ：v 


釦果这皮第^~ 攻扣 g ㈣在谇: :;，d 、 .a. 




數戏场。 " > 一个空數通\挺后 S 把含存 入 


..L^c^Lstorfl 0 C- 


lopalStorige^setlt^inr’sticlCiesATOy' JSON.Btringify(5tiekiesArrayi) r 

一二 ....■: 上：：細卷鞟救雜綾灑 


else 


atickiesArray = JSOW*pai:se (stickiesArrayKl^ 


否则 ， 4 U^alstc^a01 中找到 ii 个數 
钱 L t 龙进 .ft 解朽,将它杆痴碎一个 


return s tickiesArray ； 



■不论娜一神讳次 ^ ■噩后部含仿.到 
—个发铂，所以达印逄个啟 


你现存的位蛋， 
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集成所有代码 


集成在_起（续) 




写好了 getStiekiesArray, 卜―面来看简化后的最终版本的 in it 和 
createSticky 函数。输入下面的代码： 

function init() { 

var button = document *getElementById{ M add_but.ton M } 
btitton.oncXick - createSticky; 









iz < i . 我们 迳靂存 〖士方 
迖中建 4 接纽 寧件。 


獬 
# 


stickiesArray * getStickieaArray Q; 


韙下来获奴笆含印的鲇键的教组 


數鉬中的 M - 场分糾蕞一个钚的玷的健 下#.来.较 
驭备个健 


for (var i = 0; i < slriekieaArray. length; i++) 
var key — stickles Array [i ]; 
var value = localS-toragetkey]; 
addstickyToDOM(value) ，- 冉认获蚁徇忘的 1 

) 

把它惓扣到 DOM + 妖薄苗 ® 

傲的一样。 


现旮.金透代鈦理 H 个卯的姑致纽 
(茶不 & U ^ UStoir ( a % 廒典场）。 


完成了 init 之后，只剩下 createSticky]% 

布走孩馭即时鲑盘钼 

function createSticky 0 { 

var stickieBArray ^ gets tick ies Array (); 
var currentDate ^ new Date{); 
var key ® N sticky ,r + currentDate. getTime (); 





〆 ~ . 将昨 ㈣ 贴锺/儐的坩扣||) 

var value = document, get Element By Id ( T, no t e_t e x t''). va ltia ； UcalSUyra^t,, 

^ - 


localstorage, setltem (key^ value); 
sti clcie sArray. push( keyh 


斿把这个新#坩加到卯吋鲇教 Sfl - 


locals torage. s etltenvC" 9ti ckie sAr ray'% JSON. str ingi £y (a tick iesArray ))； 

addStickyToDOM ( valued ; (一贫后娉这个數迷粍讀為字符 $ 写 © f 1 ) 




n 用靶即吋钻更新贡面，龙这 
个卯的贴增如 fj E > o/vi 


UjcaLstoh ^ ge , 
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在存储 


试一试 


输人所有代码，并淸空 localStorage , 清清爽奭地开始。 
加载这个代码，你应该能看到与前一次完金相同的表 


现。 Joel , 你会肴到你的代码现在能正确地工作 n 




Pick up dry 
cleaning 


Cancel 
cable tv, 
who needs 
^ now ? 


Buy another 

Apple 

gadget 












^erei^re 1)9 

Dumb QuestiQns 


A Z 我们一直在使用 E4 aticky_ M 
作为 localStorage 数据项名的前 
缀。 对于 bcalStorage 命名机制 
有没有什么约定？ 

答： k > ca 〗 Storage 数据项的命 
名并没有约定。如果你的 Web 应 
用在域中的一个小内站上，而且 
你有能力控制这个域，那么命名 
就不会成为问题，因为你很清 
楚这个 ㈣ 站上所有不同 M 由使 
用的所有名字^最好使用一个 
特定的名字 T 可以指示依赖于 
这个数据项的页面或 Web 应用， 
我们 iJL 为这种想法很好。所 
以 Sticky ." 能帮助我们记住这 
些数据项都与即时贴应用有关。 

问： 这么说，如果我的即时 
贴应用只是域中的多个应用之 
— T 我就必须考虑潜在的冲突, 
是吗？ 

答： 没错在这种情况下，对 
你来说（或者对于管理这个域 
中各网站的某个人> ,最好为如 
何对数据项命名做出规划。 


问： 如果我有很多的即时贴， 
我的 stickiesArray 会变得很长 D 
这会有问题吗？ 

^ I 除非你创建了成千上万 
的即时贴，否則不会有问題 
(如果你确实创建了成千上万 
的即时畎，我们倒是很想知 
道你怎么能如此多产>。现如 
今， JavaScript 的速度己经相当 
快1\ 

1^1 • 那么再明确一下，我们可 
以在 local Storage 中存储任何对 
象，只需要先用 JSON 把它转换 
为串就行了 T 是吗？ 

答 :完全正确。 JSON 申是 
JavaScript 对象的简化版本.而 
_1■大 多數闻单 JavaScript 对象都 
可以使用 JSON 转换为一个字符 
串.并存 祐在 k > calStorage 中 a 这 
包括数纽（你 L 经看到了），以 
及包含爲性名和值的对象，稍后 
就会看到。 


要为你的 
bcalSiora 没 e 數嫌 

项绝择—个嚀冬机 
锏， 

—个域中的其他应 

扣弟_要在 
localStorage ^ ^ 

餘数租或对暮， 
stringi 

要#慷的值，在 

JSOJV. parse^fc^ 

祈。 


你现在的位置 > 
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另一个特性请求： 





_ 


•往翻承參 


Buy imother 
Apple 

gadget 


Cancel 
cabl^ tv^ 
fieedi 
it now? 


齡 up dry 
cleaning 


Learn how 

<vid€0> 

works 


my de&k 


Go grocery 


shopping 


Go to m 


Find my 

mobile 

phone 


刪除便亲贴 


喳吹毛求庇的 




她说得没错，如果不能删除即时贴，这个应用不会有太大成功。这一章 
我们已经提到过 local Storage , removeltem 方法，不过还没有具体 i 寸 
设。 removeltem 方法取一个数据项的键，并从 loca 〖 Storage 将这个数据 
项删除 2 


localS1:orage. remove I'tem (key) 

这 个古法 含蒯除 \ 

kftfrLstoragfi ： 中有 

#龛# 的教興场。 


荀一个 4 數 - 


ii 


听上去很容易，是不是？哈，不过如果你再仔细想想，刪除即时贴并不只是 
调用 removeltem 方法那么简单 D 我们还需要处理 s tic kies Array . , . 
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^|^「pen your pencil 


令、 




在本地存储 



SJjt 



删除一个即时貼！ 

下面你会看到 localStorage 的内容 a 你已经有了所需的全部 JavaScript 
代码以及 removeltem 方法^拿出铅笔，画出从 localStorage 删除 
sticky _ 1304220006342时需要做什么。画完草图后，再在下面写出伪 
代码，说 IB 你将如何编写代码， 





H sticky_1 304294652202^ "sticky 」 304220006342" “sticky _1 3D4221683B92 N "stickyJt304221742310 B 



“shopping topping 
cart item 1 n cart item 2" 


"StiCtW 1304294652Z02" l"sticky 13Q4220006342 M j'sticky 130422174231 & T, I "sticky 1304221663892” 

“stlckiesArray” 




你现在的位置 ► 


447 











练习答案 



iarpen your pencil 
史 X Solution 


删除一个即时贴 I 'r 

下面你会看到 localStorage 的内容。你已经有了所需的全部 JavaScd 
代码以及 removeltemSS 。 拿出 铅笔* 画出从 local Storage 删 
sticky _ 130 422 0006342时需要做什么画完草图后，再在下面写出伪 
代码， 说％ 你将如何编写代码。以下是我们的答案。 



磁 /1: ; ^ 

f|Pil * | 



Utca Lstoro ^ fi , stuitey _±30^02.000^3^ 









"stickyj 304294652Z02 H "sticky >3042200^@342 M H aticky_1304221683892^ tt stlcky_130422174231Chopping “shopping 

f cart item 1" cort item 2" 


"sticky.l 304294652202" hati 130422174231Q CT | H stickv_1304221683892" 1 



( 0 僅用 d JJitacaiStotafe^} 除鍵 
^ u stickyJ 30412000634^ 的印时蛄。 

( 2 ) §*) stickiesAtia^ ^ 

(3) ^sticktesAt^M ，f sticky J304ZZ000634Z r ' 的无棄。 

⑷将 stickles ® |») LocalStotA^e ( 光将它转病為一个孝符宰 ) 

(5) 存 DOM 中查我 %£ic^_f304220006342" # ## 它蒯狳。 
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在本地存储 


ddeteSticky 亟数 

你已经对如何删除便条贴做出了计划，下面就来看一看 deleteSticky 函数： 

*wsPii 


的蛄 r ff 入 ,t 制餘的印射贴的璉。 


f.n.tion deiet^tickydcey) ( / 遂狀 ― 咖 —_ 

locals towage, removeltem(key) : %/ 

讀 係有一个 stUtek£Arrfl|j ( 鉍防 

var stickiesArray = getStickiesArrayO ; 万 一） 『钱后达代处 If 巖驵采查 

if (sticklesArray) { §f 我莪 tHSJ® 1 ) 除的键。 


for (var i = 0; i < stickiesArray, length; i++) { 

if (key -= fltickiesArray[i]> { ( _ 〆 我料这个 谜后， 璉用邛 Uei 枵会从激硪 

stickle a Array, splice (i f l); 朗餘 B 

> ^ 

\ 




1 ocalS torag«,s etltem (" 3 ti c kie sArray'% JSON. atri ngifyta tick iesAr^ayH ； 

K _ 最后， 将(己 

錢将 a 个餿刪除)爲®存 u 

Loc^LStorct^ n 
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用 HTML 和 JavaScript 选择即时貼 


如何迭烽要删除的即时貼？ 

需要有一种方 法允许 用户选择要刪除的即时贴，我们可 以不遗 
余力地为每个便条增加一个小删除图标，不过，对于这个即时 
贴应用，我们想更简单一些：只是当用户点击某个即时贴时才 
将它刪除。从可用性角度讲这可能不是最好的实现 t 不过，确 
实很简单。 

要实现这个功能，首先需要修改即时贴，以便检测出什 
么时候点击了这个即时贴，然后可以将这个即时贴传人 
deleteSticky 函数， 



.令.谂一个便务站的 T 含将它 
蒯餘。， 


Pick up dry 
cleaning 


addStickyToDOM 函数中要做很多事情，下面来看如何 完成: 


系诘： 戧坍僅用即的瞇的鍵乘咱_#8澧条.鍵# 
+吋问 B 只 龙钃用 arffiStUfeyiDPOM 就者怿 入这个饉。 


function addStickyToDOH (ktty f value) { 

var stickles = document .getElttmBntByld ("stiokiea 11 ); 

v»r sticky = document . createElem«nt ( n lx T, )； 妁：中 Sp 0 *) |£ ^ <U> ^ ^ 

—个嚕一的 ld D 达祥-^来， d^Utcstbtey 

軚锥祆®仿点违 5 娜个砰 的玷 。 由子我 
们 3 经知遷印时蛄的铒袅 0 S — 的，辦以 
Rtfi 用 il 个键作為 


»ticky. s^tAttributA ( n ld n ^ ktty); 
var sp«n = document. c reat«E l«me nt { fl span * 1 > 
span.satAttributo { ,r class Ir , ”愈 tielcy 1 '); 


span.innerHTHL = aiiiclcyObj .value ； 
sticlcy.appendChildispaxi )； 


} 


stickle a .appendChild (sticky); 
sticky, onclick » d*l«t«Stxckv; 


栽 in 注砟备个鄄的蚝坩釦 3 龙击 
处夺。点击一个畔 ㈣ 貼时 
就 含谈用 ^ eUttstUtey * 



现在你的任务是更新所有 代码， 只要调用 addStickyToDOM, 都要传入键和值。应该很容易找 
到需要更新的位置 a 不过，等你完成后，请对照检查本章最后给出的答案，翟看你找得对不 
对， 



不 I 跳过达个趙 
V , 否 5 W 后®的刑 
该含不正常， 
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在本吔存槠 


如何由事件得到荽删除的印时贴 


现在每个即时贴上有一个事件处理程序来监听点击事件点击一个即时貼时，会调 
用 deleteSticky， 并把一个事件 (event) 对象传递到 deleteStieky， 同时还会 
传递有关这个事件的信息，如点击了哪个元素^我们可以査看 event.target 来得 
出点击了哪个即时貼。下面来仔细分析点击一个即时贴时到底发生了什么 0 



釦 IL 电忐一个印吋玷的 
着毯郝 分< 事件0杉坍 
基<山>无噱。这 i 袅我 
们«塵的，现 
在的 M 轼 I 这个即 时姑 
的饉。 




部的，这 
可不4溅们想龙的， 


<li id^ ,T atieky_1304270008375 ,t > 

< 9 p&n cla» a =1< a ticky lv >Pi ck up dry cleaning</8pAn> 

</li> 




H mm 





中刦 it 郢的鲇的 

htmu 


不 论娜种 fJIS. 盘杰印的坫 1 威的搴 _ 
Ip 含 fl il H dcUtcStbtey D 


C U (target) 舦 I ■击斿法威搴碑的犬棄-芍 
tr / J ^ target 属#得 时这个 尤素的 H 如畢0#甚 


^< a >, 舦太功.咸3。 


function ddlfitieStickyCe) { 
v*r k*y = «. tar gat. id; 

if (e.target.tagMaiae. toLowerCase () ■» '*mp^n n ) 
key * •.targ«t .p«r«ntNod«. id 

1 雜麵戀 _ 議 麵:頻 

localStor&ge, r^2nQv«It«m(kfty); 
var atickie&Array = getSticklSBArray 0 ; 
if (sticki*sAfr&y) { 

for (vii7 i = 0; i < a tick ies Array + long tti; i++) 
if (key == s tickia*Arrmy [i]} { 
a t ickiesUr r »y. aplicafi,!); 



如麇 0 枒 4< 邛則 fi 得 

<U> 

无黄的戠们乘饜的铋。 


现 存芍以 d 用这个锺 
从 LoGflLStiJrage 以及 
stUteUsAn'W u 则除數孩 


} 

localStorvge. s«tItBm( ir s tick ies Array", JSCK .atuingify^fltickitt sAr ray)); 

r^veStickyl-rosiDOMCk^y) ，- ^ - Sfl 以历石埘除忽含这个印的岵的 <U> 「达轉_皋 * ^ 

这个即的钻吋它軚含诮关。孩下乘舦鍛这冬工作……… 


你现在的位置* 
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从 DOM 删除即时貼 

还要从 POM 删除即时贴 

要完成删除工作，需要实现 removeSticlcyFromDOM 函数 * 之前已经更新了 
addStickyToDOM 函数，在 DOM 中增加了即时贴的键作为包含即时贴的 < ii > 

元素的 id , 所以我们可以使用 document . getElementByld 找到 DOM 中的即时 
贴。首先得到即时贴的父节点 T 井使用 removeChild 方法来删除即时贴： 

|t Hit < Ll > ^ t -- 

. 节先饵 f ) 

M^re^tMoc(it , 钱 Mfi 用 


详入錡耳我的 犬景 的键 (也犹 

function remove Stic kyFr omDOM ( k«y } { 

v*r sticky == docuuuezit, gotElementB^Id<key); 
sticky.parentNode .removeChildfstielcy ); ^ 


<LL> 1 Uui> 醜 〆 辛眷 




^< ll > 



OK , 傲令 谢试 . 

键入所有这些代码，加载页由，增加和删除一些即时贴。退出你 
的浏览器，再次加载，真正做一次演练！ 


j 




我们当然能俄到 f 


来吧，根据你的经验，肯定能搞定^怎么做到呢？嗯,我们要创建一个 
对象来保存便条的文本和它的颜色，然后再存储这个对象，作为即时贴 
数据项的值,当然首先要使用 JSON.stringify 将它转换为一个字符串。 
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E 新用户 界齑來 指定顏 t 

目前，所有便条都是黄色的。如果能有一组即时贴颜色就好了。 


科 ^ ^ 

'"ijr • Abi 1 llii^l I ■ ■ 'j tmm A ■ m fc 

A ■< i ^il J-■■* #!■ una "hx 
- •， ：^*r i". _ 



可以 4(11 蹭 

Pick up dry 

Cancel 

Buy another 

加一个遂择菜 

cleaning 

cable tv . 

Apple 



who needs 

gadget 

条遂择 as 龙 


1 It now ? 


的赖急。 

<* 




在本蚶存储 

V 1 



f\ 




舞任酈承參 







下而先来解决容易的部分：更新 HTML ， 提供一个颜色选择菜单,可 
以从中选择颜色。编辑 notetoself . html 文件，更新表申，像 T 面 
这样增加颜色： 


<htm3.> 


戧们 R 烀汝表辈， S 含 
^ 的係踔 不定。 


<fomi> 


fi$<scUfit>^lci : 我们 #1 这个 d 存 

java&vipt 中 获肢所 iiH 场的值。 



故扪 嫌加] 斗种卯的 


将 4 郎时坫 i 
本燦 加一个核 
# . 设用卢知 
道备个 i 本域 
分糾 用来傲 
付么 & 


<option va liifiA ,r LightGoldanRodYel 1 ok t, >ye 11 ow</opt± an> 

<option v* lu^= ir Pal«Gra«ii ,r > 9 ^ « «n</opt icm> 茗个遠场的 fifi i -个赖 

<option valuo^'XightPinJc^^in^/optioni^ — ^ ^ 名『 

t 入 fi) 邨的蛄的祥 Ai\ 

< 0 pt±on v&luas IT LightBlue ， T >blue</option> 

</8elect> 

<lab 眘 1 fo£s n note text IT >Text : </labe 1> <input type=" text ，T id= M note text 1T > 


<input type =,t button M id= f, add_button 1 * valus= ,r Ad.d Sticky NotQ. to Self 


</for m> 

… k 表荦的嵙余部分侈持不变。 

</html> 


我们一直在使用 CSS 定义便条的默认颜色，现在希望利用便条自身来 
保存它的颜色 & 所以，现在的问 题是： 如何把即时贴的颜色存储在 
loc a 】 Storage 中。 


你现在的位簠 ► 
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使用 json 存储颜色 


JSON.stringify, 不 R 是用子数组 

除了即时贴文本，还要存储它的颜色，为此可以使用之前对 stickiesArray 
采用的技术：可以将一个包含文本和颜色的对象作为即时贴的值存储在 
localStorage* 。 


r. f Nwfc Bj Tevt： Cancel cable tv_ who needs it now? Add itjcky wgtc ^ faif'j 




驭用户餘入的顧毪迮和邦的坫之本，把它们打 
包為一个阇挲的时象。 


，中存飜达个对 象, 
的鑪, 



本摊存储 


蛊似 f stbteiesArray H ^ 

用 UioflLstorfl 0 d r s £ tftcvuL ^ ^ ( 

(右^1窃， 必猜的郎的姑 ('右 诫 

^JSON stnv^l-fij 0 


v 皋 r a-tickyObj = { 

， T valu# ,r : "Cancel cable tv, 尊 ho needs It now?'\ 
"color ，T : n LighfePi nk ■【 

)； 


下面重写 createsticky 函数，除了存储即时贴文本还会同时存储颜色 # 为了表示文 
本和颜色，我们将使用前面提到的简便对象： 

function createSticky () { 

v&r sticlciaaArray = getS^icklesArray(); 

var currentDate ~ nev Date {); 

var colorSel«ctObj = document, g»t£l«m«ntB3fXd ( n not«_color ,r ); 
v&x = «olorSal*ct0bj. s«lact«dlndax; 

var color » colors e leetObj .v^lu*; 

var k^y = ^aticky^' + cur r^antBate (); 

var value = docume nt. ge tEleme ntByld { “no 

var atickyObj 年 { 

■VttXu* 11 ; vain*, 

■■color IT i color 




4 - 


这 4 鸟椬常 — 
获联錡 连 择的柏 t 
遂 S * 的值。 



然后 fi 用这个 錄疤气 
^tlcteijobjt 这个的象色含薄 i 
H sp 时蛄的太本和用户逢烽 

的麟 4 n 


将 stUteyoljj 放入 
Uwi 匕 torage 之霣，來 
的迖个 _ f 诮 ^> SDN . 
£trl^Lfy B 


loc«XSto^g«. (3«y, JSON. atringify(atickyObj)); 

sti c kie sArray. push (key ); 
loca 1 S tor. setrtem ( 11 atickiesAiray", J50H. etringify (s ticki«sAr^ay)); 

addStickyToDOHCkfly, stickyObj); y 現毪 .M 免 ^eLstUleyTTiDOMfi 个对寒拓不 | —个亡 

K . ^ 本穿 。 (S ^ ^ ^ ^ f T 片 不対？ 
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在本地存储 


使阁新的 sfickyObJ 


既然要将 stickyObj 传人 addStickyToDQM, 所以我们还需要更新这个函数，要 
使用这个对象而不是之前传人的字符串，并设置即时贴的背彔颜色 p 不过，这 
非常容易，下面就来看 一看： 



这 t 髴龙把参數時磕 光钍 系不 
!印 ㈣ 蛄的太本 d 


function addStickyToDOM(key^ stickyObj) { 

V 9 .t stickles = document * g©txllementById( M atickieft ,T ); 


var sticky s document, "li 1 "}; 

sticky. BQtAttribute rid” ， key); 


以 f4 入 flddstkkiy t^OM 的 stUtey obj 
珥 f) 賴毯， 


一个 style 

以用床保 
问这个 ; i 
f 的轉式 , 


s ticky* styl«* backgroundColor « a tickyObj. calor ； 


- /v__ 

vair span = do cume nt. c r q* teE leme nt < 11 span " >; 
span.setAttribute("class", "sticky"); 
sp&n.innQrHmL = 
sticky. appendChild(span); 
stickieis, appendChi Id (sticky); 
sticky, oncliclc ^ de 1 q tmSt.lck.yj 


stickyObj »v»Xu«; 


4r~ 


「主砉，夺 Jfl 仰中设 i 好 
恿 伐时. 我们靂拍定 
bfl cteg rouv^dColor ( $ 不 & f 象 G _ S £ 中 
印样相宠 b « cfe 0 row .^ u 4- c ^ Ujr D 


搀后 # 厲从这个的:象珥到将奋印讨 
蛄中值用的 i 本 ^ 


还有一个地方需要更新代码，这就是 init 函数，在这个函数中我们要从 
localStorage 得到即时贴，并在首次加载页面时传递给 addstickyToDOM 。 


function init () { 

var button = document, getElemontById( T ， add_button T, >; 
button.oitclick ^ creatoSticky f - 


var 


for 


atiokiesAray = getStieJtieaArrayO; 

(var 1=0; i < sticki«aArray.length; i++) 
var key - stickiesArray[i]; 
v«r valo« - JSOH.parse(l&calStorage [key]) f 
AddstickyToDOM (k«y^ value); 


© 為 达 I — 个的象，琢不爯 I— I 
i 穿符車。 


将 ii 个对象入兩； T ■爲传 
入 5 符華（代硭看上去差一样的，任4我们 
作 入的系 WT 罔）。 


) 
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测试彩色即时贴 




龟 i 





测试即时贴顏色 

再次运行即时贴应用之前 T 首先需要清空你的 i oca 〗 s tor . 因为上—个版補即、 g 咖 ⑽㈣ 
时贴中没有存储颜色，现在我们会使用一种不同的格式来存储即时贴值。之前我 

们使用的是字符串，现在会使用对象 • 所以要淸空你的 localStorage , 重新加载豇 或者 璉用控 軔&瘃 请空。 

而，再增加一些即时贴，为每个即时贴选择一个不同的颜色以下是我们的即时 
贴（我 丨门 还会检査 localStorage ) : 


我们奋坩如即时蛣的分别这择 

mitih&t. 



. ,,, 

• ••' • • ___* ~ ~ 


Nqci te 


aU» 


f.himl 


a 
—-_ — 


^ Gcitjgk 


wii™ ■ +• I T€JL 


I . .._ 

{Srftky to l*lf ! 


Pick up dry 


Cancel 


■ .•/*'. N：：-： ： ； !： • 

Buy another 

cleaning ! 


cable tv, 

1 

Apple 



who needs 


gadget 



it now 

— '-i. 

■ 

V'I'-aJP '' '• • ^ '- r ,! ,j L'l" ' ：•'• *■ ,，,•..:•* 1 .八•农 ■，: : J 


. 

_ m : :’X- •:• ，碎 • i ::f 零 v i d J 

• 



• - i'-". i；^- ■’:. •- ^ •, i 


1 

l 






•.- 您 LiBmoiiCi. _ ) *i^du"C« ’ _S« ，lptfc> Ljf Tim'™ ('，ahtca 

l3 Q ^ 

M^fe CSL . . Jfi.i " 'J.i»■ 

■l>*^ 1 -Jfiit. - i i- - kk.l. -w. > n ,—■' 


F fl 

_ Solptb 

ft- Stvlesh 


；«*¥ 

■_ V miif04eH«9i 

slKUif 

: UkMUi™ 
ife»ctrv„!lllJlllCF^K 4 M 


-fibi _ 

ftiJwr 'tt^wnsmeF Appte- 

pB»kri’ TKliL _ ■■■j^rttcidmsWTWHWI 

rtisfe^iJiii sc-iTiair j t-Dd V im isajw ] ■ Vf 崎 _i3 ms<s4 糾 m 
r^a'j*"nc^/fciw^ T.igWinrl 


slfHtl 

rMrtffiDECif^.ticnni 

► \ »' O^fldkuiii 
- ■UhiJ Sboraigi 

iHKsmmiiii 

，这 34lf <«n 5 WAQ4 

► ,j C 4 »h 4 -i 

► m AppHcairan Cjchi 

lP >s o st _ 

VnHRHHRRMBRMIRMH>>HHIRMttSWMRHRIMH# 


各个便条钻的 岱现 存甚一个对寒 (6^ 
邳吋玷的 st 本 fjfi 和( I 个印时坫的舳.总， 
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对于有些应用来说，这确实是有道理的。 

根据我们现在掌握的知识，当然可以重新设计这些即时 
贴、让它们作为对象嵌人在•个数组中 a 榇下来你可能 
就决定这样做。这对于你的购物车可能也很合适_唯一 
的缺点是只要有仟何改变， JSON. str ingif y 和 JSON. 
parse 方法就必须做大量工作，例如，要增加一个便条, 
我们必须解析整个便条集，增加便条，将所有便条写回 
到本地存储之前还要再将所有便条转换为字符串。不过 t 
对十这个即时贴应用中的数椐量 来说，般 来讲这不会 
成为问题 < 不过，你确实要考虑考虑 CPU 有限的移动设 
备，还要考虑 CPU 的使用对电池寿命的影响）。 


、令儺 


所以，是否把所有数据都打包到 local Storage 的一个对象 
或数组中，实际上这取决干你 需要存 储多少数据项，每 
个数据项有多大，以及你要对这些数据项做哪种类型的 
处理。 


对于数量有限的即时贴来说，我们的实现可能有点过于 
“兴师动众”，不过它确实为我们提供了一个很好的途径 
来了解 localStomge API , 以及学习如何处理其中的数据 
项，这一点希望你冋意^ 


你现在的位置 ► 457 





忌?试 


我们已经告诉过你，每个用户的浏览器上会有总共 5 MB 的存储空间，不过尽管 
5 MB 听上去很多，但要记住，所有数据都采用字符串格式存储，而不是采用一 
种字节高效的数据格式存储。对于_个很长的数（比如说国债），用浮点数形 
式表示时只占很少的存储空间，但如果采用宇符串形式表示，所占的内存空间 
则会有几倍之多《所以，认识到这一点， 5 MB 可能并不能像你原来以为的那样 
存储很多数椐。 

那么当你用完所有 5 MB 时会发生什么？嗯，很遗憾，有些行为在 HTML 5 
规范中没有得到明确的定义，而超出 5 MB 时浏览器的表现就属于这种没 
有明确定义的行为^如果你超出这个限制 T 不同的浏览器可能会有不同 
的举动一浏览器可能会询问你是否希望允许更多存储空间.也可能抛出_ 
个 QUOTA _ EXCEEDED ERR 异常，可以这样捕获这个异常： 


try 






-- 


lacalStorage.setltam(rnyKay, myValue) 
catch (e) { 

if -= QUOTA_EXCEEDED_ERB) { 
al«rt( M Out of stojragel ,r ); 


f 4 try 缺中的一个访吩叫/漢 
用；如菜出3问！§> 抛谂 

—个异常，軚含 il 用蚋， 




这&裁们 S 沒有泜糾 
的一 ( j , r 
4芍能 S 进一锋5稱& 
个内容 。 


裁们纛查看这4不4-个§锌圮拥梓茯（萆不基另外黑砷萁常）。釦粟星‘ 
汸笥戗想做签 t 荀*义的公理，*不只甚给出—个越薄。 



0镝4不荀刮祐薄郫抛 ± C2 ^ 01A _ 

的，它们确 i 含抛达一个异常，蚵以巧翁 f 
鐾赴 珑汶1 數荈场 ㈣ 出现异常的—艎伐况。 
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可以试着让浏览器发挥到极致，我们看不出有什么拒绝的理由，可以利用这个机 
件看看它的工作程度，看看它能达到的上限，另外看看在有压力的情况下它会有 
什么表现，下面来编写一些代码，让你的浏览器达到它的存储 上限： 



<]1 时 |1> 

<script> 



DANGER 

Explosive 
Exorctss 

■, - '• ； - 


fMI 吋存镝的字符宰中只包 
# — 个字符.後光 



localSt ； orage. se^tltemC fuse", 
while (true) < 

var fuse = localStorageTgetrtempfus.”}; 
try ( 

localStiorage. se^tl^emC'fu$e fl , fuse + fuse) 


让它的长度 
£ f| 加 …… 


. 将这个 專加错 (将 它鸟 t 痴速 姓 ) 

夕 然后含试锊它 

LotaUStorfl0£ a 


catch (@) { 

alert( “Your browser blew up at N + fuve.length + ，T irith sxc«ption: 


e )； 


break; 

} 

) 

lacalStoraga .r^moveltemf 11 £use TI ) 
</acript> 

</head> 

<body> 

</body> 

</html> 


输入这个代码，然后加载，试试看吧！可以在不同的 
浏览器上尝试„ 



不 I 窠下圬#子，以 

UeflLstorHgAffil & "4 ^ E 


_s 

出 这个絲 i ?,。 


ir 


釦集你有照 
f 运行这个 
代仏 4存 
ii ? 写出 (i 
行铉粜。 



使用风险自负！ 

说实在的，这个 
ut 代码可能会破坏 

watch it! 働浏览器 ，这 

可能导致你的操作系统出错， 
而这有可能导致你丢失之前 
所做的工作，所以使用时风 
险自负！ 
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关于会话存槌的信悤 






不是卢克，但有另_位天行者 

看起来 locaiStoragc 有一个姊妹，名叫 sessionStorage fl 如 
果把使用 local Storage 的所有地方都替换为全局变量 
sessions t or age ，数据项就只会在浏览器会话期间存储。 
所以，一旦会话结束（换句话说，用户关闭浏览器窗口时）， 
本地存储中的数据项就会被刪除。 


sessionStorage 对象支持的 API 与 loca]Storagc 完全相同，所 
以没有更多新内容，要知道的你郎已经知道了> 

可以试试看！ 

:卢克-大行者 （Luke SfcywaJker ) 是 C 星球大战》中银河系闻名的最休 
大的英雄。 





众 S i ■ 

V - 在本地存 




a 








I 将去 





你已经学完了 k > calStorageAm ^ 下面你会看到这个 API 的所有主要角色以及相应的： 
任务 D 看看你能不能璐定谁做什么。我個已经帮 你完成 了一个。 



clear 


se««ionStoraqe 


key 




removeitfiH 


length 



gefjtem 


16eal5t6rage 


ClUOTAifXC 茲卯 PJ 忱 


用我可以长期存储数据项。 

我拿到鍵和值，把它们写入 ibcalStorage 。 现在要圮住，如果 
吣 cWStorage 中 d 经有对应这个键的一个数据项，我不会警告 
你，而只是会覆盖它，所以你最好知道你宴的是什么。 

如果在 locaiStorage 中耽搁太久，使用了太多空间，你会得至 I ] 1 
— 个枯常_， - 会受到我的批评。， - 1 ! - '^4 :- 


需宴删除一七数据碛？ lit 会很連慎地完戒这个 任务& - 

... _ _ _ .. ■ .• • ■ 

- - . -~ . - ■■■_ — ■ ■- 
. ■ ■ - . .■.■ ■ ■ - - ■ _ • ■ - ■ ■■ . 

_ ■ 、 - ■ — - ■ - - ———— — . • ^ 

- . ； ■■ ■ > • - .** j 

只需要备我一个 : 键，我会找出4应这 > K 键的数据瑣 拓它 
的值交给你, /: 


我® 干短期的,.只要你的浏览器打开 ， 我就会 存储许尚内 
弇， -如桌 :吳閉 洳览器，噗:&的所有内容“会消失无影综^ 


却，你不苒需要 localStorage 中的所有数搌嗶，〔我会清除所 

#这些数据项;把它 fll 扔掉，给_你 S 下一个于干净净的空 
localStorage f 要记佐， : 義只 fe# 壺減自％ 的豳 ) 


需要‘道你 local Storage 中有多士 +数 搪项鸣？ 故 我吧。 ' 

十 _:'y 

鸾给我 T -: 个奉引 > 我会吿 诉你1 ㈤ 幻 S torag ^ ■中 这个索引相应的 

■ — .■■■_._ „ ■— _ 

键 c^~ - — ----- - 
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使用 Web -# 储 的方式 

既然你 e 经？藓？ 

localStorage, 怎么使用珉 ? 

localStorage 有很多用法*即时贴应用就用到了 localStorage ， 我们 
并不需要一个服务器 T 不过即使有服务器 》 localStorage 也很有帮助 4 
下面介绍另外几种使用】 oca i S tora ge 的方法。 




f v # 

♦孜郸承令 
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在木坳存捕 


我有一 个昨紫《| 

的游戏,它玎从在苒令不疇 
的浏定 SS 泊释时工作，我在 
使用1时 a 该 { wane 完成权0 尚步 


iW 




达为我樓供？疼鵷枏户献态的葙方法。我 
认前**展种基子 ffi *« 滩的会错和疟奮# 
铺 0 现在可敁窳瘅在本 * t 存链 M 户的状窃，只 
蕞在必 f 的媾況 r 才铒入臌奔霤蟪代铒。 
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W ⑸存词回顾 



BULLET POINTS 


Web 存储是浏览器中的一个存储库，也 
是一个 API , 可以用来从这个本地存储库 
保存和获取数据项 D 


大多数浏览器都为每个源提供了至少 
5 MB 的存储空间 9 

Web 存储包括本地存储和会话存储 & 

本地存储是持久的，即使你关闭浏览器 
窗口或退出浏览器，本地存储仍然保 
留。 

会话存储中的数据项会在你关闭浏览器 
窗口或退出浏览器时删除会话存储很 
适合临时数据 项，. 而不是长期存储„ 

本地存储和会话存储使用完全相同的 

Web 存储按源（可以认为是域）来组 
织，源就是 Web 上文档的位置（例 
如 ， wicked lysmart.com 或 headfirstlabs * 
com ) e 

每个域有一个单独的存储空间，所以存 
储在一个源的数据项对另一个源中的 
Web 页面是不可见的 6 


使用 I oca I Stora g e.setl te m {key) 可以向本地 
存储增加一个值。 

使用 localStorage.getitem(key) 可以从本 
地存储获取一 个值。 

可以使用与关联数组相同的语法在本地 
存储中设置和获取数据项，可以使用 
local Storage! key] 来完成。 

可以使用 localStorage.keyO 方法列出 
localStorage 中的键。 

loc a IStorage.length 是一个给定源 
kKalStoage 中的数据项数， 

使用浏览器中的控制台可以查看和删除 
loca I Stora g e 中的数据项。 


■ 可以从 localStorage 直接删除数据项， 
只需右键点击一个数据项，并选择 
delete (注意，并非所有浏览器中都奏 

效)、 

■ 可以在代码中使用 removeltem(key) 方法 
和 clear 方法删除 localStorage 中命数据 
项。注意， clear 方法会删除你完成这个 
清空操作时源所在 locaBtorage 中的所有 
内容 * 

■ 每个 localStorage 数据项的键必须是唯一 
的，如果使用与一个现有数据项相同的 
键，会覆盖这个数据项的值。 

■ 要生成一个唯一的键，一种方法是使用 
当前时间（自1 97 0年以来的毫秒数）， 
并使用 Date 对象的 getTimeO 方法 & 

_要为你的 Web 应用创建一个合适的命名 
机制，使得即使数据项从本地存储删 
除，或者如果另一个应用在本地存储中 
创建了数据项，也能正常工作 D 

a Web 存储 g 前只支持存储字符串作为对 
应键的值。 

■ 可以使用 p a r s e 〖 n t 或 p a r s e F 1 0 a t 将 
localStorage 中作为字符串存储的数字转 
换回真正的数宇 & 

-如果需要存储更复杂的数据，可以使 
用 JavaScript 对象，在存储之前会使用 
JSON+stringify 把它们转换为宇符串，在 
获取之后会使用」 SON.parse 再将其转换 
回对象 D 

■ 本地存储对于移动设备尤其有用，可以 
用来降低带宽需求。 

■ 会话存储类似于本地存储，只不过浏览 
器存储库中保存的内容不会持久存储， 
如果你关闭标签页、窗口或退出浏览 
器， 它们# 不复存在„会话存储对于短 
期存储很.用，如购‘会话。 
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H 丁 MW 镇字游欢 

花点时间来测试你自己的本地存储。 


在本地存储 




A 








顳 





撗向 

3. 我们使用10<^及0「396的__来创建键名时， 

会遇到一个问题 t 即时贴名之间存在间隔 a 
4+路克天行者的姊妹 & 

7. 将对象存储在 localStorage 之前必须先_ 

对象^ 

8. 大多 k 浏览器为每个源提供 __ M8 存储空间。 

9. 诵过杳看事件 可以检测用户点击了哪个 

即时贴。 

10. 用这个方法在 locaiStorage 中存储一个数据项。 

11 . localStorage 只能存储__ 9 

12. 我们认为在 localStorage 中存储一个_可能 

是异想天开，不过事实上利用 JS0N , 这真的可以 
做到。 

13. 使用一个 try/ _来检测 local Storage 中的配额 

超出 错误。 


纵向 

1. 我们使用__来保存所有即时贴的键,. 

从而很容易在 loca I Sto ra ge 中找到它们 。 

2. sessionStorage 就像是 localStorage，K 不过不 

是 > 如果关闭浏览器窗口，它存储的 

数据就会 消失口 

5. 我们 H 二 __将即时贴文本和它的颜色存 

储在一个 loca IStof age 数据项中 & 

6. 使用_将一个字符串转换为整数。 

7. Cookie 存在一个_ 一 问题》 

8. 如果在你的浏览器中存储了一些内容，然后飞 

去 ，等你回来它依然在那里。 
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练习答案 


_ 弟畏游欢奢案 _ 

想试试运气吗？或者是不是该说想试试你的水平吗？这里有一个游 
戏，可以测试一下你对 localStorage 的掌握程度，不过一定要专心。 
利用你目前掌握的在 localStorage 中获取和设置键/值对的知识.跟 
踪豌豆到底在哪个果壳下面下面是我们的答案 a 



function sliellG&m 攀 0 { 

localS^oraga. tI'tom{ lf shelll* 1 , ' J p«a ,T J ； 

localStorag^. s( lf 9hell2'% T, eanpty TI >； 

localStorage. sstltomf "sheLIB 1 % T, empty"); 

loc alStoraga [ ”摩 h»l li M ] = "«mp ty n / 

local Storage [ M sh«112] » "'pea"; 

loc&lSto^ags [ M sh®113 n ] ® T ， empty T， ; 

var valu« = localStorage, getltem( T, shall2 ,f )； 

loc&lStor&ga. 9«tXtem( lt shelir , / valua); 

value = 1 oci&l Storage + 

lo cal Sto rage [ M ah*l 12 fi ] = va lue ; 

v&r key = ,T ahm’_; 

lo ca IS tar age [ k*y ] = 11 pM "； 

key « ir shelll’’,_ 

lo oa lS^o rage [ key] = 

key * ,, Bh©113 n ； 

lo c AlStor age [ key] = ’■ ampty 11 ，- 


啣个采秃下 © 荀豌 1 



饉 

值 

shettt 

empt^ 

shettZ 

pea. 

shetlS 

empt^ 


统爱存 shua 下面 


for (var i = 0; i < lo c alS t or age. length; i++) { 
v»r key = localStorage. (i); 

vmr value ® local5tO£age.g«tIt«m(key); 
alert(k«y + ,r i n + value); 

) 

) 



$e 

ilOH 


现在你的任务是更新所有代码，只要调用 addSddtyToDOM , 都要传入 
键和值。 

你应该已经更新了 4化和<：1：631：63[：^乂丫中的所有3(^5£吵¥了000111调 
用， 如下： 


addSt:ic]tyToDOH{k^y,, value); 
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在本地存储 



你认为我们当前的实现在哪些方面可能会有问题，请在旁边 打勾; 


0" 如果 locaiStorage 中有很多数据项不是即时贴，显示即时贴会很低效 D 

如果另一个应用删除它自己的数据项而导致 localStorage 长度变小时，即 
>时贴可能会被 setltem 覆盖 

[Y 很难很快说出到底有多少个即时贴，必须迭代处理 bcalStorage 中的每一 

个数据项来得到所有即时贴。 

FI 用 CookieGL 肯定比解决这些问题更容易！ 



还需要确定具体如何在 locaiStorage 中存储一个数组。 

你可能已经猜到，我们可以使用 JSON 来创建数组的一个字符串表示，如果是这样， 
那你猜对了，一旦想到这一点，就可以在 bcalStorage 中存储数组了。 

应该记得 ， JSON AP 彳中只有两个 方法： stringify 和 parse , 下面具体运用这两个方法 
来完成 inlt 函数： 


Ik U>caistora g e 获奴盘钼 。 


function init() { 

// biittan code here. 


扣菜中没有 < 拭釗 逭一个 4 數通， f 埏它曠洽变 I 

乩扣变 I ^tLctetcsArray 蕞一个 豸符辜 。 

如果必硒剎燶一个靶教组， tfi 


var stick!asAxray = 1 ocalS[ IT s^iclclesArray 11 ]; 


if (!atickiesArray) 
s tic ki« s Array = 




[]； 



i| 數 ifi 的 

个？得辜表 # , 然后存餚 …… 


locals tcfage. &etl tem( M stickiesArray fl r JflON, o trxngify <gtickiesArray» ; 

^~ 
nicies Array); 


else { 

9 1 Ick i as Axr ay = JSQN - parse {& t 1 c 


) 


for (vax i = 0; i < Stic kies Array, length; i++} { 
var key ss stickiesArrayCi]; 
var valuB = locals tor age [key] f 
adds tickyToDOH (value); 

) 


如 果卯纣坫激纽 3 铉存 镝在 
中（作为一个孝符奉） ■ « t 龙使用 
JSON 进矜稱析，_科2后娉锼教€斌铪 
stbteitsArrfly 变 I 。 


具明磘—下我打笏光饵推余的宇符$将它 
礴朽#—个数 iih 然后爲靶 达个袅组赋给 stkfeksA ⑽ 士定耆 
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练习 < i 


自己尝试 


(或者突破你的 5MB) 


我们已经告诉过你，每个用户的浏览器上会有总共 5 MB 的存储空间，不过尽 
管 5 MB 听上去很多，但要记住，所有数据都采用字符串格式 存储， 而不是采 
用一种宇节高效的数据格式存储。对于一个很长的数（比如说国债），用浮 
点数形式表示时只占很少的存储空间，但如果采用字符串形式表示，所占的 
内存空间则会有几倍之多^所以，认识到这一点，可能并不能像你原来 
以为的那样存储很多数据^ 

那么当你用完所有 SMB 时会发生什么？嗯，很遗憾，有些行为在 HTML 5 
规范中没有得到明确的定义，而超出 5 MB 时浏览器的表现就属于这种没有 
明确定义的行为。如果你超出这个隈制，不同的浏览器可能会有不同的 
举动——浏览器可能会询问你是否希望允许更多存储空间，也可能拋出一 
个 QUOTA _ EXCEEDED _ ERR 异常，可以这样捕获这个异常： 



f try 


localS ' torag ' e . aetrltemCmyKey , myValue ); 
catch ( e ) { 

if (e QUOTA EXCEEDED ERR ) { 



f itry f 共中的一个菊 
薄。如栗达了问艟 * t 

一个异常，弒金镇角成 toh 铗。 




哉们 J 奢 f 这4 不甚一 个存噼 紀 餚箝礴 （芾; T ! 另外 
蓽神爯常> s 如果袅，魷祛 豳用户 a 汸可钱 想漱普 t 
■ ft 秦义的赴 II . 而不只蕞给出 一个钹逋。 


0 f 斿不4所有列婼.器部抛 i G ^ U . OV ^_ 


ERR ■异聿。不过劣你艎出哦和 J 
时，它们蹢实含抛出一个异常 r 所 W 芍能 f 
i 让 H 设更数揭场 ㈣ 出现耳常的―艎择况。 
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可以试着让浏览器发挥到极致，我们看不出有什么拒绝的理由，可以利用这个机 
件看看它的工作程度，看看它能达到的上限，另外看看在有 II 力的情况下它会有 
什么表现。下面来 编写一 些代码 t 让你的浏览器达到它的存储 上限： 


在本地存储 


♦隹醱承參 



幵诒的伊钻的字得$中只笆拍—个字 
符 ， 4為 >«■，。 


■- ,T ) 




-- 将这个杳（枵它鸟连戏） 


< head > 

< script > 

让它的皋度 一 £坩加 ■ 

locals tor age. setltem("fuse' 
while (true ) 1 { 

vax fuse = localStorag ^. getrltem [ M fuae " > ; 
try { 

localStorage . seiiltem ( n f use '% fuse + £ us «); 

} catch ( e ) { 

aierti^Your browser blew up at " + fuse,length + ,T with exception ： 11 + e ); 
break ; 戧们的 0 的弒 




粍后 f 试将它写纪约 
LocaLStovagft ,, 


} 


) 


localStorage. remov©lt.em( "f use 11 ); 
</script> 

</head> 

<body> 

</body> 


输入这个代码 + 然后加载,试试看吧！可以在不同的浏览器上 
尝试。 


腻 ⑶ ir 編用 U 


存 ■和 

的 (i 行 

禮壤。 



hlipc /； IOCK » h 05 l 

brow^r ble » 冲如⑽ m 2 
QtlOTA ^ EXCErorD ^ DOMh ( ept_U 

f ok-A 


Vcitr 

Efrw 




The page at touih 如 t H > y‘j 

bf $ w>cr tiiew Up it 20971 S 2 tACtptli&fV 
^OTA_iXCEEKDJMk DOW [ x^ptkm » 


Your 

Eficf ： 


OK 
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练 习答案 





你已经学完了 localStofage API。 下面你会看到这个 API 的所有主要角色以及相应的 
任务。看看你能不能确定谁做什么 • 我们已经帮你完成了一个。 



用我可以长期存储数据项 


我拿到键和值，把它们写人 localStorage。 现在要记住，如果 
bcalStorage 中已经有对应这个键的一个数据项，我不会警告 
你，而只是会覆盖它，所以你最好知道你要的是什么。 


如果在 localStorage 中耽搁太久，使用了太多空间，你会得到 
一个异常，会受到我的批评。 

-需要删除一个数据项?我会很谨慎地完成这个任务。 

只需要给我一个键，我会找出对应这个键的数据项，并把它 
的值交绐你 D 


我属于短期的，只要你的浏览器打开，我就会存储你的内 
容。 如果关闭浏览器，噗，你的所有内容都会消失无影踪 # 


如果你布再需要 localStorage 中的所有数据项，我会清除所 
有这些数据项，把它们扔掉，给你留下一个干干净净的空 


localStorage (要 记住，我只能清空我自己的源) 


\需要撼你的_灿呼中■少个数据 项吗？ 翻吧, 


交给我一个 索引, 我会告诉你 k>ea!Storage 中这个索引相应的 
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h I 

在 存储 


H 丁 JWh 5 稹字游珙著赛 
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10 运用 JavaScript 








场 i 





WebI 作线程 



參 


瑯 


# 



脚本运行缓慢，你还想继续运行吗？如果你使用 JavaScripi 或浏览 
Web 的时间足够长 T 可能见过 "slow script " 消息告诉你脚本运行缓 
慢。不过，既然你的新机器里已经抑有那些多核处理器，脚本怎么可 
能会运行得慢呢？这是因为， JavaScript —次只能做-件私。不过，有 
了 HTML 5 和 Web 工作线程，一切都改变现在完全叶以创建你自己 
的 JavaScript 工怍线程来完成更多工作 D 也许你只是想设计，个更有响 
应性的应用，或者可能只想最大限度地发挥机器的 CPU 能力，不论怎 
样， Web 工作线程都竭诚为你提供帮助。带上你的 JavaScript 经理帽， 
找些工人干活吧！ 


这是新的一章 473 




JavaScript 

玎怕的 “slowscript” 

JavaScript 有很多好处，其中有一条：它一次只做一件亊情。 
这就像我们所说的“单线程”。为什么这算 - 件好事呢？ 
因为这样-来，编程就很简倘若同时执行大 M 线程， 
要想编写一个能正确工作的程序可能很有难度。 

申 ，线程也有缺点，如果你交给一个 JavaScript 程序太多的 
工作，它就会受不了，最后我们可能会收到一个 "slow 
script " 对话框，告诉你脚本运行缓慢。只运行-个线程还 
有另外一个限制，如果 JavaScript 代码在很努力地工作，会 
占用大量计算能力，对你的用户界面或用户交互来说就所 
剩无几了，应用#上去会相当迟缓，甚至毫无响应 4 



JavaScript 如何分紀时间 


下面来看 JavaScHpt 如何处理一个典型页面的任务，通过这个分 
析來了解前面所说的是什么 意思： 


(i 弒袅我们軔 

Jftv / flScri/pt 务:免 
宪威它1傲的茗一 
碑 f ,鈑完 一 _后 
再鈑下 一4。这 I 


JavaScript 线程 





铥行 wt 奋縻 


o 



的号艰在用来说. 这4隹不耮 , s 辦 
车 Z <1 耜宪载 3 ,系£用卢界砺看上去 ii 
it 像徕, 秸猓铗漱出响应 D 
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运用 iavaScrif ® 


单线程遇到麻烦 

对于很多应用来说， JavaScript 的这个单线程计算模式确实表现不错，这一点不假，而 
K 正如我们所说，采用这种模式，编程会很简单 & 不过，编写“计算密集”的代码时, 
就会影响 JavaScript 的能力，以至干不能有效地完成所有工怍，这个单线程模型就有问 
题了 □ 



JavaScript 线程 


r 

C 

C 

C 



$ i ^ jRVa^ciript 

代踢薷蘑太多处 
!|时间，这导致 


及用>界面中鸟用 
卢的交虽。 



ch 时 


峰嘀. 41 S — 个大數组太占用 

咖 5 ! 


whfrrr 


whirrr eh 叫 I 


处 H 苫一个 ffi ) 户盎古 

limm 






I 验從南 

' ， '^ m ' mm 


户®入 


0 用户很夹霣！ 户^ 

I C _ 柑 y 布更箱 ^_ J 5 


o 


K 1 * 我们放 # 3 . 弹出邦个 
箝示 W 本运行繾 欞的对培椹嚕 f 
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JavaScript 线程 

增加另 一 t 控制线程提供帮助 

在 HTML 5 之前，我们的页面和应用中只能有一个控制线程，但是有了 Web 
工作线程，现在终于有办法创建另外的控制线程来提供帮助了。所以，如果 
有一些代码的执行需要花费太長 时间， 就可以创建一个 Web 工作线程，由它 
处理这个仟务，而让主 JavaScript 控制线程确保与浏览器和用户的交互一切正 
常。 







蜃 


任郵 


JavaScript 

线程 


紙 裁们可 以釗 速一个 wdxrt 姨 a , 它食 
右一个_独的钱沒中运朽，由它宠威所节艰巨 


<b 

wAsd 賴 
费贵注行 

… ■- 



前面说过，一个控制线程可以 ii : 编程简单而容易，而现在我们的做法似乎偏 
离了这种说法，这-点不可否认。不过，后面你就会了解到， WebI 作线程 
经过 r 精心设计，对千程序悶來说，切仍然很简单1很容易，而轧一样安 
全。稍后就来分析这是如何做到的…… 
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适用 Java 


% 



JavcrS cripir ^ 私产奸典隹场 


本周 访谈： 

JavaScript 把时间都用在哪里了 


Head First :欢迎回 来； JavaScript ,你能來太棒 f e 

JavaScript ; 我很乐宼按受采访 1 只要与我的 F 3 程安推不冲突，要知道我有太多的事愔要做。 

Head First : 这正是我考虑盼今天讨论的主题 9 你实在太成功有那么多业务，你是怎么一 
一做到的呢卞 

JavaScript : 嗯，我有我的哲学，一次 R 做一件事，要做就把它做好> 

Head First ? 怎么会一次只做一件事情？在我们看来，派-边在获取数据^• 一边;显示觅由 k ■同 
时还与用户变互， S 外还没忘记管理定时器和提醒，等等 p 等等…… 

JavaScript: 没错，这些都是我做的，不过不论我做什么 r 我都只做那一件事。所以，如果我 
在处理与用户的交互，在我完成之前，我所做的就只是处 理揭户 交互。 

Heact First : 这怎么可能呢？如果一个定时器到期了，或者有网络数据到达，或者发生了其他 
情况，难道你不停下来处理吗？ 

JavaScript : 出现一个事件时，比如说你刚才提到的，这个事件会增加 Pt —个队列中。 在我完 
成当前正在做的工作之前，我甚至看都不看它一眼。这样一来，我就能保证正确，安全，而 
且高效地完成所有工作6 

Head First : 那么，你处理队列中的某个任务会不会太迟啊？ 

JavaScript : 哦，这是有可能的^不过，幸运的是，我是浏览器 WebK 面后台的技术，所以即 
使我有，点滞后又有什么笑系呢？在这方面，你应该与那些运行航天器推进器或核电站控制 
器代码的家伙聊一聊，他们有不同的处世原则一这也是他们能挣大钱的原因。 

Head First ； 我一直想知道在浏览器上收到 "Slow script , do you want to continue " (脚 本运行 
缓慢，是否希望 继续） 对话框时到底发生了什么？是你休息了吗？ 

JavaScript : 体息？哈，真是开玩笑。那是因为有人建立的页面让我有太多的丁_作要做，我根 
本做不完 t 如果你写了一段 lavaScript 占用了我的全部时间，这就会影响你与用户的交互，我 
已经尽我所能了。 

Head First : 听上去你需要些帮助。 

JavaScript : 好在有了 HTML % 现在我有了帮手，止是因此才引人了 WetO ： 作线程如果你需 
要编写计算密集的代码，可以使用 Web 工作线程分担一些工作^这样-来，我还能继续关注 
我的工作，由工作线程帮助完成一些繁重的任务（而目_不会干扰我> a 

Head First : 有意思，下面我们就来看一看。卜一个问 题"… ，噢 * 等一下，他居然走了，看来 
他得完成他的下一个任务了。 真是个 刻板的 家伙， 是吧？ 
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b ?: r ! 线程如何工怍 

Web 工作线程如何工作 

下而来石 Web 工作线程生命屮的一天如何渡过^工怍线程如何创建，如何知道要做什 
么，另外如何将结果返 M 给主浏览器代码。 

要使用 Web 工作线程，浏览器苜先必须创建一个或多个工作线程来帮助完成计算任 
务。每个工作线程都由各自的 JavaScript 文件定义，其中包含完成工作所需的全部代 
码（或代码的引 用）。 







浏览器 




工(1线杈由 一个荦 
抽吻 fl vase 



工作线程生活在一个相当受限的世界中。它们无法访问主浏览器代码能够 
访问的很多运行时对象，如 DOM 或主代码中的所有变量或函数， 
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要让一个工作线程开始工作，浏览器通常会向它发送一个消 
息。工作线程代码接收到这个消息，查看其中是否有特殊的指 
令，然后开始工作0 








.... ■说及_> 


. _ ^ _ 

l«rui r. g, |4 Q.' ■' 


浏览器 


工作线程完成它的工作时，会发回消息，并提供它处理的最终结果 D 
主浏览器代码会得到这些结果*把它们以某种方式结合到页面中。 



你现在的位置 ► 


479 





















DOM 縮 




这是为了保证高效。 


售: GQM 和 JavaScript 容所以如此码功，:很 ， 
大的一个原因就是我胳能髙度 优化 
DOM 橾作 > 因为只 有一个 线程能汸! 砵 
DOM , 如果 it 多个计算线程并发地改 
变 DOM ， 就会坪重影0&它的性能（而 
且实现浏览器的人必须化很大功夫来 
确保对 DOM 的修改是安佥的 r ) 。事实 i 
上^如果允许同时对 DOM 做大竜:修改， 
很容易导致 DOM 处于一种致状态 
的權况，这可不好，非常 糟糕。 
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缓存数据，以便在页面中使用 D 

处理数组中的大量数据或者来自 
Web 服务的庞大』 SON 响应。 


管理数据库连接，并为主页 
面增加和删除记录^ 


自动赌马代理。 


分析视频。 




用户键入时对页面完成拼 
写检查。 

轮询 Web 服务，发生特殊情 
况时提醒主页面。 


□ 画布中数据的图像处理。 

突出显示代码语法或其他 
语言。 

根据用户正在做的工作预获 
取数据 & 

□ 管理你的页面的广告宣传。 


□ 

□ 


芍 W 在 iif 奚出你的钰法 


A 


运用: avaSc ^ 




^terpen your pencil 




TO 


下面给出工作线程的所有可能的用 法 & 你认为哪些可以改善应用的设计和性能？ 




□ □ □ □ □ □ □ □ 
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注意 



Google 的 Chrome 浏览器有一些额外的安全限制 * 
不允许直捿从文件运行 Web 工作线程。如果辱图 
, , 这么做，页面不会 运行， 你也得不到任何_尹告 

Watcli 诉你觅面为什么不运行（而且没有任何错误消息 

* 通知你已经出错 ） ， 

所以，要运行这一章的例子，建议你要么使用另外一 
览器，要么运行你自己的服务器，并从 http:Mocalhost 运行。 

或者如果可以访 问—个 托管服务器，也可以把这些例子上传 

到托管服务器运行 s 





汪芍祕使淹 Chroma iifjct、 
另.« LLow - flU-a 



:::. 

: [ 


- 峰 。 ，卿 唞 ㈣ ■ 攀 1 W ，.. ! ” *^ *^^^^^**^*^^^**^ 


不过 • 餘04 3 Ma 代钨，否 
則我 n 芊達 试迻用 ii 个开另 D 





Watch if! 


几卞所 南现代浏览器 都支持 Web 工作线程，不过有一个例外： （ntemet Explorer 9-好在 
还有一个好消息： IE10 以及以后版本将支持 Web 工作线程，但是对于旧9和之前 &所有 IE 
版本，则无法提供这种体验。 

f 过，不用将 IE 单做考虑’用下面的方法可以很容易地查看一个浏览器是否支持 Web 工 
作 线程： 


wi^daw^ 金定 Si 专属性 wor\ur a 

if 《 window[ f _WorkerU { 


如果沒荀宅义 VVorfeftr ：龙明 
a 个到 M 器束 umA^ a 


var status = doc^amont . getElementById < , r status r, }; 
b tui s. j.nn6 ^HTML = "Bumni&r, no Web 1 3 11 ； 


: 

:: 

I ■. 


: 

I 




X 、 访芍铙含鉍 a M 号异 f 皂用 $ M 神方式 il 瑾这特 n , 在达 
、 f , 戧 (H 只基夺 "£. tahu ^'' 的 i 黄中竣入一个味枭让用 
户輪道剥 M 器不 A 為 web J ： fUMm _ 




.W 
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运用」 


笫一个 Web 工作线程 


下而来具体创建一个工怍线程，看看它是如何工作的。为 
此,我们需要一个页面放人所有内容。先从最简单的 
HTML 5 标记开始，把下面的代码键人 pingpong . html ; 




<! doctype html> 

<html lang= T, en M > 

<head> 

<title>Ping Pong</title> 

<zneta eharsetj’.utfD 

<script 3 rc = 11 manager. 33 "></script> 

</ head > 达七 ㈣ sc 咖 代砝制 遺和薄理 M 

<body> $ 工 

<p id="outp i at M ></p> 

</body> v 哉们含存 & f 致八 

</html> —. 签輪出 0 

如何劍連 Web 工作线程 

开始实现 manage r . js 之前， F 面先来看如何具体创建一个 
Web 工作线程： 

为 5 创逮新的工 rr 线杈， atn 釗建 7 -个斜的 

J 

var worker - new Workert 11 worker*. 33 ") ; 


帶上安金铕 .出发 
RiH 飨我一个 
丈件，軎诉我你 
着逋我钕什么 




承參 





将 a 个於峨给一个名 
^ wprkert ^ ja^asenftt i # D 


it*.*- SI _ 中忽含 

达个 id 纟 i 疗的相应代砝。 


这样就能创建一个工作线程了，当然，你不必就此止步，只 
要愿意，还可以创建更多的工作线程： 

^刁以很窖革地釗建另外馮个工 

var worker2 - new Workerrworker 0 s.k ^ 作线疗 .$ 们使龙的代鷂鸟第卜、 

var workex3 ^ new Worker ("worker, j a f, }; ^ —个 1 作线枝 ft) 同。 、 


var anotherjworker = new Worker ( T, anotber_worker .j a M ); 

烕老，还芍以枨滅一个不阌仰: ScrL_lt 碑釗 it 真 

他 ima 。 



核后含着 f fe ) 如何罔的後用 
多个工作钱枝- 
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靖写工作线程伢理器 

編写 Managerjs 

既然你已经了解如何创建一个工作线程（而且也知道了这是多么容 易〉， 

下面就来完成我们的 manager.js 代码。我们会力求代码简单，目前先创建 
一个工作线程 & 创建一个名为 man age r.js 的文件，并增加以下 代码： 

爸场货 面宄含 加栽。 

window, onload = function Q { 【 

var »or 3 cer = new Worker < ，， worker 卜然后釗建一个於的工 

} <1钱趕。 





/ 






舞任颶承 ♦ 



这是一个很好的起点，不过现在我们还希望这个工作线程具体做 
些工作。前面已经讨论过，要让一个工作线程做一些工作，一种方 
法是向它发送一个消息^要发送消息，需要使用工作线程对象的 
postMessage 方法。用法如下： 


window , onla&d = functlonO { 

var worker = new Worker ( T , worker.j s "} 

wockGr . poatMesaagef ^ ping 1 *); 


t 


W^b 

线 flAPI 中玄殳 D 


迻用 Ifl 钱枝的 
个葡犁的字符華 X 。 


芍以这轉漱 . 



postMessage 犄 S 


postMessage 中除 r 能发送字符串，还可以发送更紅杂的消息。 
下面来看消息中能发送哪些内容 r 

worker.postMessage ("ping T, ); 

worker»postM©ssage{[l r 2, 3 f 5, 11 ]】； 

worker r po&tHeasage({ "message ”： "ping", " count": S}); 


9 ■ ■■瞥邏 rii 


甚 ^_>SON 时象 


但不能发送函数； 

不钺岌 法函盘……靼与基數中芍軲忽 含—个 
worker. postMessage(updateTheDOM); 用 .專鈦 I ■ 作络 Jl 夸弓 ft 
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从工作线程接收滴患 

manager ' s 代码还远没有完成。如果我们想利用工作线程的劳动成果，还 
要能够从工怍线程接收消息^要想接收一个工作线程的消息，需要为工作线 
程的 onmessage 属性定义一个处理程序，一旦这个工作线程发来消息 T 就会 
调用我们的处理程序（并传人消息 ） 。可以这 样做： 



window^ onload = function () { 

var worker — new Worker { M worker .j a ，T ); 


worker . postMessage ( Tl ping ,r ) 





var message 怒 "Worker says M + ev6nt.da.ta; 

document. get Element Byld ('*ou tpu t ,T ) , i nner BTKL = messagej 

d 

\_ 从钱杈得纠一个法&的.您 
仓致杏 HTMU 盃面 i ： 的一个 < p > 

尤 舞中。 


存 这里，我们 定义5 —个函恕 f B 晷从 ii 个10至戈 
杈招歧 « — 个消烏轼金佴用达个函數3来钱 
枝的味,&笆装存#个事件的象中 q 


f 赛入公理沒存 的搴拜 匇象节 
一个 do 切属伐，與中色含/ 

正基我们的） 





onMessage 特写 


下曲来简单了解 onmessage 处理程序从工作线程榇收到的消息，前面我们说过，这 
个消息包装在一个 Event 对象中，我们对它的两个厲性感 兴趣： data 和 target ; 

达軚基 X 仃线 a 祛交一个※总吋以工作 
钱佟盔 ( M 到苟系饩0的的象 


worker, o nines sage 
var message 、 


l 


• functiori (event) { 
event .data; 4 ^~ — 


data 深饯 忽含工 (UUiAiM 的谪忽 
(婀如 一个穹符宰 ，如 ) D 


var workar = event . target ; 


}r 


Ur 別 t 是盔出 d 个熵 g 的工作钱程栌 — 个 q 
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第一个 X 作线程 

规在来编茸工作线程 

要编 写工作 线程，首先需要确保这个工作线程可以接收从 manager . js 发出的消息， 
这样工作线程才能得到工作号令 d 为此，我们述要使用另一个 onmessage 处理程序， 
这是工作线程自身的一个处理程序。每个工作线程都可以接收消息，只需要为工作 
线程提供-个处理程序来处理接收到的消息。我们的做法如下（你可以创建一个文件 
worker . js * 并增加以下代码 ） s 



omnesaage * pingPong ； 

. 」 \ , 

将 工 H 冬禮 的暴 fi 戎们 龙钱写圣教来 


编写工作线栈的消悤处理我序 

下曲来编写工作线程的消息处理程序 pingPong ， 先从简单的开始^它的工作是这样的 （你 
町能已经从 pingPong 这个名字猜到 了）： 工作线程先要检査它得到的消息，确保其中包 
含字符串 " ping " ,如果确实包含这个字符串，再发回一个消息 “ pong ” 。所以，实闷上 
这个工作线程的工怍就是得到一个 “ ping ” ， 回答一个 “ pong ” 。 这里不打算做任何繁重 
的计算工作，我们只希望确认管理器和工作线程之间能够正常通信。噢，对了，如果收到 
的消息屮不包含 > ing rt ,就将它忽略 a 

所以函数 pingPong 会得到一个消息，并响应 “ pong ” F 面为 worker.js 增加以下 代奶： 


onmessage = plngFong; 


工作钱筏从 irt 砝戏性一个洁 6 



的, 食 i? 用 ^Lw^Poi^g 函廬 , 4 f# 
入这个消 A 。 


function pingPong ( vvant ^) { 

if (©vent. data = M ping TI > { 
postHes sage( TI pong"); 


,__ — 如粟 Ci 个滴 ,6 中 fef 字埒碜 

就盔 W — 个消& 。 IfiiSfi 

的涑忌将 Cl 闵给釗 建这 个线杈的 
^~ / 代鹆。 


iff 钱 f 置也使用来 
t 送洎 fi 。 
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做个删试 



确保你已经键人并 ClJ ； 存了文件 pi ngp ong . 


运用 





html , manager . js ^] worker . js a 现在打开这些 


文件，以便查看。下而来考虑具体是如何工作的。 
旨先， manager . js 创建一个新的工怍线程，为它 
指定一个消息处理程序，然记向这个工作线程发送 
—个 > ing ” 消息。接 f 来，工作线程将 pingPong 
设置为它的消息处埋程序，然后等待。在某个时 
刻，工作线程从管理器接收到一个消息，接收到 
消息时它会査看其中是否包含 > ing " ,如果确实 
包含，这个工作线程会做大量很少的 I 作，发同一 
个 “ pong ” 消息 6 

此时，主浏览器代码会从工作线程接收到一个消 
息，它将这个消息传递给消息处理程序 d 消息处理 
程序冉在这个消总的前面追加 41 Worker says ”，并 



显示这个字符串。 


根据这个执行过程，现在页而应 3 显示 "Worker 
says pong " ……好了，好了，我们知道 r , 你不用 
担心……加载这个页面吧！ 
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粉演浏览器 



赛在奔伊渰扶 eJavaScHpf 的濟 3E 稃。对子 
r 窗的毎廨代碚，杷你当成—个辑3£榇，在 
洚主绀出的麸太®出务个代格的辕出，钶妒 

侬旗铯个代碚僳枰我扪 W 才躲 S 聆 

worker , jx * 




^1. 


e o 


令 

: S _ 

iR I J ^ J — «m 




芍 fei 爿照栓壹本耆蚤 
的务 IL 




window.onload ^ functionO { 

vAt worker = new Worker( u itorker.js T ， J; 
woTker^onmessa.ge = function {event) { 

alert ("Worker says T， + event,data); 

} 

for (var i = 0; i < 5; i++> { 
worker.postHessageC^ping 1 '); 

} 


window, onload = function { 

var worker = new Worker ("worker, j s TI ); 
worker, onunes sage = functioii<event) { 

alert [ 11 Worker says ” + event,data}; 

} 

for (var i = 5; i > 0; i 一 ） { 

worker .postMessag© ( u pong 1 '); 

} 

} 
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运用 ，」 a v 



wi ndoir. onlo ad = function Q 



var worker ™ new Morker ( 11 worker.^a"); 
worker, onmes sage — ftmction (event.} { 

alert("Worlcej ： s&y ， ” + event.data}; 
workBr.pos^MesBagci (^ping"}; 

1 

walker .postHessage (^ping ^); 




當鈦 a 馮个代鹆的笨 **j *i 


必场荚闭洌链薄对戧埋出 



window, onload = functiianO { 

var worker = new Worker f T worker t js T, ); 
worlcer.anmes&age = function (event) { 


alert ("Worker aays + event, data); 


sQt Interval ( pinger , 1000); 


functrion pingerO { 

worker, pos tMe s sagd (” ping^'); 
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使用菌洁工作线程的寒 _ 



「pen your pencil 


MJSL 


— ■ 

龟 i 


Sir 




■% 

慶挪 




虽然工作线程一般通过消息得到工作号令，但并非必须如此。下面给出一种 
简洁的 方法， 可以让工作线程和 HTML 漂亮地完成工作。如果你看懂了这个 
代码要做什么，请在下面给出描述 □ 可以对照检查本章最后给出的 答案二 



命 


<fdoctype html> qu^te.htntL 

<html lang^ ： ,T en ，T > ^ ■/’ 

<head> 

<tit!e>Quote</title> 

<meta charaet= 1l utf-8"'> 

</tiead> 

<body> 

<p id— "quote 1 f ></p> 

<seript> 

var worker = new Worker (''quote. j s ,, J i 
worker.Qnmessage = function (event) { 

document. ge tElementByld ( 11 quote ，T ),i nnerHTML = event. data / 

} 

</script> 

</body> 

</htrol> quote js 

var quotes - [ ,T I hope life i&n’t a joke, because I don T t get it,.'% 

’■There is a light at the end of every tunnel,,■ ju^t pray it's not a train!", 
"Do you believe in love at first sight or should J walk by again? 1 ']; 
var index = Hath. floor {Math, random 0 * quotes. length) i 
postMessage {quotes [index]) 


檢入代 i $4 试着 a 
f7f 
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运用 Jaw 3 cj 




下面为我们的 pingPong 游戏增加几个工作线程^你的任务是在下面填空，完成这个 
代码，从而向工作线程发出 3 个 p 【 ng ， 并从工作线程发回3个 pong 。 


4 : 




存空中递入彷 
的代碡。 


window.onload = function<J { 妓们 fh 个工忾 錢伐-把它们存铎存—个 
v 肛 numWorkera = 3; 數 ig W £3 初 rs 中。 

var workers = □; ^/ 

for (var i = 0; i < ； i ++ ) 《 

■ * * 1 + i « ■ r ■ ■ |i ■ + 

var worker = new 「 worker . ja "); 

worker . = function { event ) { 


alert ( event , tar get + 11 3 ays M 

+ ev ® nt . 


}； 




workers .push (worker); 


Y 


这要郎个 ㈣ Z 如利 


for (var i = 0 F - i < 
workers [ i ] t 


i++) 


(" ping 11 ); 


} 


t^ereicire n9 

Dumb Questi 9 n 3 


创建工作线程时能不能直接传递一个豳数，而不是 
利用一个 JavaScript 文件？这样看起来好像更容易，而且 
与 JavaScript 通常的做法更一致 a 

* 

w T I 不，不能这么做 a 下面来告诉你为什么 * 要知道 + 
工作线程的要求之一是它不能访问 DOM (出亍同 样的原 
因，也不能访问主浏线程的任何状态 ） 。如果可以向 
Worker 构造函数传入一个函数，这个函数可能还包含 D0M 
或主 JavaScript 代码的引用，这就会违反这个要求。所以， 
为了避免这个问题， Web 工作 线柽的设计者选择的做法是 
只能传递一个 JavaScript URL„ 

在消息中向工作线程发送一个对象时，它会不会成 
为主页面和工作线程之间的一个共享 对象？ 


答： 不会的，发送一个对象时，工作战程会得到这个对 
象的一个副本 a 工作线程做出的任何修改都不会影响主页 
面中的对象。工作线槎在另一个环境中运行，这与主页面 
所在的环境不同，所以你不能访间主页面所在坏境中的对 
象„工作线程发出的对象也是如此，主页面只能得到工作 
线程所发送对象的一个副本， 

^ ■ 工作线程可以访问 loea 丨 Storage 或做出 
XMLHttpRequest 堉求吗？ 

’ 这是可以的 . 工作线租可以访问 loca 】 Storage , 也可 
以做出 XMLHUpRequesi 请求 s 
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在工作线程中包含 JavyS cripi 代码 










下面为我们的 pingpong 游戏增加几个工作线程 4 你的任务是在 
下面填空，完成这个代码，从而向工作线程发出3个 ping , 并从 
工作线程发回3个 pong g 下面是我们的答案。 

(伪龙豉变这个定 I , 

瘅增加更多 ! 


r 【承參 


wi ndoir. onload = funct:ion() ^j/ 
var numWprkers = 3; 
var workers =[】； 
for (var i = 0; 1 < numVTork«ira; i++) { 
var worker = new Worker ( M worker * js M ); 

! + ■■!■■» 嚅# + S + k 

worker , o runes sage ^ function ( event ) { 



a±^i 炫中 sli 
消 £ 让理锃痔 ， Cif 
僅用 3 工忾钱筏的 


alert ( event , target + ” says " 

+ event , data ); 


J ； 


workers . push ( worker ) 



僅用伽 a 属性来洎 s 的内容。 


> 


for (var i = 0; i < workers, length; i++) 
workers [i] .postHesaage ("ping T, >; 

> t 

出 ]^1 A ^ 消愈 :。 


☆si ⑶ 


扣*§砉，这 f 也芍以锺无 

内 lx 从 ：? 


你贪*«这个级鼴出现 3 汰° 



•^瑯 
5®^ ■聲 

♦ 
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运用 JavaScript 



我一盧 at 釦理釦钶在我齣工作线稃中包玄 
额外的 JavaSerlpf 丈件。我锊剡 3 —# 金繳 
方赛的我想利朗达螫庫，如 m 简簟地 
它们 I 制粘贴到我的工作钱我中，达个丈 
件弒太庞大了，得稞难鳅舻。 


任麒 


承參 


^mm 


可以看看 i mportScriptSo 

Web 工作线程有一个全局函数，名为 importscripts ， 
可以使用这个函数向工作线程中导人一个或多个 
JavaScript 文件 q 使用 import Scripts 时，要向它提供 
你想导人的文件或 URL 的一个列表（各个 URL 之间用逗 
号分隔），如下： 

import Scripts (" http : // bigaci « nee . org / nucl©ar * js T, , 

"http ;// nasa . gov/rocket - j s ,T , 

^ r> myl ib s /atoms ma s her ^ j s M ); 

中放入 0 个或多个历考 
分賜的 javwscHpt kRL, 


调用 import Script 3时》 会按顺序获取和执行各个 

JavaScript URL 。 


注意 importScripts 是一个 " 货真价实”的函数，所 
以（不同于很多语言中的 import 语旬），可以在运行时 
决定如何导人，如下： 

if (taokType *== ''songdetection T, ) { 


importScripts [ ,T audio,js r 'J 


产比 S&r^t& 袅一个 函盘，兩以芍以 
抬 f4 务 J 求导入 代砝。 
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mandelbrot 集 


虛拟： fcM 搾夺 

Mandelbrot 集的探险家们已经掠夺了这个虚拟空间的很多区域，给它们起了一些可爱 
的名字，比如说“海马谷”， “彩虹 岛”，还有可怕的“黑洞”。从当前的实际房地 
产价值来看，似乎只有虚拟空间中的地产才能保值 4 所以，我们将为 Mandelbrot 集构 




建一个浏览器，加人这场虚拟土地的掠夺运动。实际上，必须承认，我们已经构建了一 


个 Mandelbrot 浏览器，不过它的速度很慢，在整个 Mandelbrot 集中导航可能要花很长时 

间，所以我们都希望能提髙它的速度，要解决这个问题，我们有个预感： Web 工作线程 
可能就是我们要找的答案 



不 ($Az^rC. 
V^rtiK 3 j ： 的洛 


© 处着着 


力 n 载 http://wickedly smart . com/hfhtiml 5 /chap terlO/s ingle thread / 
fractal . html , 你会看到 Manddbmt 集的远距离图像。随意点击某个位置，就会 
放大这张图的一个区域。可以不断点击探索不间的区域，或者重新加载来重新开始。 
要当心有黑洞的区域，你4能会被吸迸去再也出不来。我们不了解你的情况 T 不 
过，既然彔色这么美，我们的浏览器最好能 w 快■点……你是不是也这么想？如果 
性能足够好，能够把视图最大化 t 占满整个浏览器窗 UI 就太 好了！ 下而将向 Fractal 
Explorer 增加 Web 工作线程来修正所有这些问题^ 
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嗯，如果你正好是个数学家 t 4能知道 Manddbmt 集就 
是下面这个 公式： 

Mandelbrot 集由 Benoit Mandelbrot 译注发现，并做 r 深人 
的研究 & 你可能还知道， Mandelbrot 集就是由这个公式 
生成的一组复数（包含一个实部和一个虛部的数 ） v 

另一方面，如果你不是一个数 学家， 考虑 Mandelbrot 集 
最好的方式就是把它看作是一个无限复杂的分形图像。 
这表示这个图像可以无限放大，放大到能想象到的任何 
程度，可以从中找到一些有趣的结构，下而就是在这 
个 Mandelbrot 集屮导航找到的一些 图像： 



为什么我们对这个 Mandelbrot 集这么感兴趣？嗯，这 
是因为 MaudeIhrot 集有很多有趣的特性。首先，它 
是由一个非常简单的公式生成的（就是上面那个公 
式），这个公式只需要几行代码就吋以 表示。 其次，生 

成 Manddbroi 集需要大贵计算周期，所以可以非常适合 士 

作为使用 Web 工作线程的个例子。姑后一点，嘿，这 5 ,'j j 

个应用很酷，实现起来很有意思，把它作为这本书的终 f 

极应用非常合适，你不这么认为吗？ 

#注 ： Benoit Mandelbrot, 波至出生的法国軚学 f ： T 作为分形几何 
平的 M 始人闻名于世。 
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计算分形 




如何 i 十茸 Mandelbrot 集 

在用到工作线程之前，下而先来看通常如何构建代码来计算一个 
Msmddbrot 集。我们并不想过多地关注 计算 Mandelbmt 像素偵:的具 
体细节I在这方面，我们已经得到 r 负责完成这些工作的全部代 
码，稍后就会提供给你。对现在来说，我们只希望你对干如何计 
算 Mandelbrot 集有一个全局认识： 


说沐，戟 tn 的 0 仿#不 4 教伢咸与 
一个盘 ( K 分科 f 家（含骂 S 盘公式）.志 
丘的 C ? 枒违 4 访仔电这个錡苯密详的 
左用. 来僅用 W 也工 0 线枝」扣果仿爿 

参考来了麟^ a 蕞一个不^的 


r 


MH UMapuidb^t$ r t 銮秘 17 ■钍運 
© 懞的备一行。 


for (i s 0; i < number0fRows; i++) 
var row = aomput-eRow(i); 
drawRow (row); 

} „ ^ 

瘩后在屬单上谂制 存你钤舛羝器行 

( s 个 M 试 rt 茲 el 9 戗金看刊 ©体含 遂行荽子: 


( 


圬子 莕一行 T t 




现在这个代码只是简单的伪代码，编写真正的实际代码时， 

还有一些细节问题需要考虑 D 例如，计算一行时，我们需 

要知道这一行的宽度和放太因子，述要知道按怎样的分辨率 宽度 


(精度）来计算，以及另外一些小细节 D 可以把所有这些细 
节放在一个任务对象中，如下： 

砭大©子。 


for (i = 0; i < numberOfRows; i++) 
var taskForRow 
var raw = computeRow (taskForRow); 
drawllowfrow )； 


creat.eTaskForRow(i); 

. tfls ㈣ 巧單 

r 

COkWpLitCl^CiW, 它含沍 

W 4 jn ^ H ¥)^ 0 


的含鋅數搞。 



现在的难题是需要修改这个代码，将计算分解到多个工作线 
程，然后增加代码向工作线程分发任务，并处理这些 X 作线程 
完成任务时提交的结果。 
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运用 Java 


如何值阁多个工作线程 f ： , ; 

你已经知道如何创建新的工作线程，不过怎么使用这些工作线程来完成更复杂的工作呢？比如计 
算 Mandelbrot 集的行？或者向一个图像应用_种类 Photoshop 的特效？再或者对一个电影场景完 
成光线跟踪？对于所有这些情况，都可以把工作分解为小任务，让各个工作线程独立地完成。现 
在我们还是来计 SMandelbmt 集（不过这里使用的模式完全可以应用子以上任何例子）。 

开始时，浏览器首先创建一组工作线程来帮忙 （不 过不能太多，如果创建太多的工作线程，代价 
会很昂贵，后面还会介绍更多有关内容），这个例子中只使用5个工作线程： 









糾览 器 JavaSoft 代该初 建一级工 





^ ^ FwUt E ^ k^rtf 

1 _ i L I 十 "totiJhMt 卜 icih 厂 HTMLVFFMiali 1 作 *™ ■ ti 




t 杏 (if , ® 緣分科 
―的 多个士运域。洩 
二 们 f 柢 ii # 士 S 域分 
^发給 m 钱锃柬宪 




浏览器 



盈栽们毒篇得的的® 
d 洌 E 赛 rt 砝 ti 将分货达 
个 B 簿的任多分铒巧多 个士贫 
麥， ijrXO 钱從來宪咸锖 





t ； 戧们的工作钱锃6羟? li 备轼 
\ 螬 ，3 r 
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如何用丄作饯…完成计算 


接下来，浏览器代码将图像的不同部分分发给各个工作线程 




每个工作线程独立地处理它的那部分 图像。 一个工作线程完成任务时，将把结果打 
包并发回。 


n ^ ^ fiAtiMi ikniottf 

•，j I i + f'rmt ■ Kdh hi Ui'Snf rd[IJli i n , J£43 






的那都分®涔。 



498 货 10 韋 





















































I * Cj% 

运用」 3 vaSc^S 


Ah 


从工作线程返回各部分图像时，它们将汇集到浏览器中的图像，如果还有更多 部分需 
要计算，会向空闲的工作线程分发新任务。 



计算最后一部分图像后，图像就完成了，工作线程将空闲，直到用户点击 
放大，然后一切又开始了…… 




密嚷龙 咸了， 



. 
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工作线程如何改进应用 



要想变快有两种方法_ …- 

首先考虑一个应用需要做大量“计算”，同时它还必须对用 
户做出响应 P 如果这个应用占用 了大觉 JavaScript 时间 t 用 
户就会看到界面很迟缓，感觉很慢（重申-次 s 这是因为 
JavaScript 是单线程的） D 向这样一个应用增加工作线程，就 
能立即改蕃用户的应用体验。为什么？这是因为 JavaScript 
在从工作线程得到结果的间隙将有机会对用户交互做出响应， 
f 尚若一切都在主线程中计算，它是根本没有这样的机会的。 
所以用户界面会更有响应性，你的应用也会感觉更快（尽管 
底层运行并没有加快）。不相信吗？你可以试试看，请一些 
真正的用户使用你的应用问问他们的 感受， 

第二种方法确实会更快4如今几乎所有现代桌面计算机和设 
备都配备有多核处理器（可能甚至还有多个处理器 ） 多核 
就意味若处理器可以并发地完成多个丁_作 u 如果只有一个控 
制线程，浏览器中 JavaScript 就无法利用你的多核或多处理器， 
它们只能被浪费。不过，如果使用 Web 工作 线程， 工作线程 
将充分利用多核，可以在不 N 的核上运行，所以你会看到应 
用速度的真正提升，因为现在利用了更多的处理器能力。如 
果你有-个多核的机器，拭目以待吧 T 很快你就会看到明显 
差别。 
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理论上讲是这样，但实践中不行。 

Web 工作线程并不希 望大最 使用。尽管从代码来看创建 
一个工作线程相当简单,恨这需要额外的内存和一个操 
作系统线程，在启动时间和资源方面开销可能很昂贵 t 
所以，一般來讲，你可能只希望创建有限的工作线程, 
过一段时间 再重用 这些工作线程 D 

还是来看我们的 Mandelbrot 例子，理论上I井，你可以分 
別分配一个工作线程来计算每一个像桌，从代码设计 
来看，这可能会简单得多，但是由于工作线程是重暈 
级资源，所以我们绝对不会那样设计应用。相反，我 
们只使用很少的几个工作线程，井适当地设计计算来 
充分利用这些工作线程。 



F 面再进步完成 Fractal Explorer 的 设计， 然后 再回来 
尝试可以使用多少个工作 线程， 从 而理解 I 作线程数 
R 对性能的影响。 
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开动你的大脑.完成一些代码设计 





你现在已经掌握了不少基础知识，知道如何构建 Web 工作线程应用 T 也了解如何创建和使用工作线 
―，另外对于任务分解也有所了解，知道如何将大规模计算分解为小任务’可以由工作线程分^ 
计从而解决这些大规模的计算问题，甚至对如何计算 Mandelbrot 集也略知一二。试着把这些知 
识琴合 起来，考_虑如何重写下面的伪代码来使用工作线程可以先假设需要多少工作线程就有3少 
(假设对应每一行都有一个工作线程），然后再增加约束，要求有限数目的工作线程（工作线程少于行 
数）： 


for (i = 0; i < numberOfRows; i++) { 

var taskForRow = createTaskForRow (i) 
var row = computeRow (taskForRow); 
dr a 替 Row (row); 


} 


我 fO 现在的弼盞 



你的说明写在这里: 
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构建 Fractal fxplorerS ® 

我们需要做到： 

□ 建交 ttTMLg $ 包 tMaruWbro 愧用 ， 

□ 输入（成：成品代培。 

□ 创建-些工作纽我來完成计 

□ 启动工作钱箱完成任棄％ 

□ *现 工作线 我代码 u 

□ 工作线枝完成任奔时处理工作钱我的 fi 果。 

□ 在用户界® 中处 ft 点击和大小壜螯事件。 


x%*-e 

运用 JavaS 




Q tlttHTML 

Q Jt 砝工作 Kilt 
□ 當 * 工 O 鹼飄 
□ mx 蜷蓽 
□ ，户交蘿 《« 



创建分形浏览器 HTML 标铊 

首先需要建立一个 HTML 页面包含我们的应用。可以创建一个名为 fractal . html 的 
HTML 文件，并增加以下标记.下面来分析这个 文件： 


<1doctype html> 
<html lang- r, en T， > 
<head> 



与 W 乜一辞 a -个枒油 

的 HT 7 v 1 L ^3 t _ 3 


{ i & 我们#你祛供的 p 成其代培食郝, fl 
中色含辦有廬值錡 S 代鹆，这笮钍瑾©衫的 


<titl©>Fractal Expldrer</^tit:lQ> 

<m©ta charset= ， T ut:f-a ，T > 

Clink r^ 1= ,f atyleshe©t ,T href= lf fractal, 
<sqript arc—"mande 11 ib.js T, ></script> 
<script arc= f, ntandel ^jg 11 ></script> 
</head> 





css ’_> 


这 f 袅 我们屦 鵷骂的 
j HVflSmiitrt …… 


如果你名知 ilzoa 伐代 iSS 么用，龙记 fi , 
戧们不含造毯链泜到一个 z fMOU 如 
$4含存劍建工 n 线伐时？1用达个丈件。 


<body> 

<canvas id-"fractal" 
</body> 


width=’_600^ height- M 600 u ></canvaa> 




</html> 




‘罨! 我们的老.明灰 


—个如 ""v 虹犬黃 a a E ^oox^oo{$. ^ , 不过后砺含看 f _j 
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成品分 形代码 




成品代碚 


狐 叫灿 ttpW 咖，⑽ rtr ⑽^何細 

下賴核 I ； j-^f ■•■； ： }：> 


必兔告坼你， 我们 原本计划闲螫个 — 暈來介绍计篝 Manddbrof 鐫齣所布趣 _ ft I . 我们打 

箕绐出诤細薄藉，包样 lendtMandelbrot 的经拓_他如何崖规 Mandelbrot 縝， MandelbrotJI 
齣箝布棟人特性， ® f 伏化，色甩等，不过后來迠辑打来电话.你知埴的_达琿爰很重要的 


电话 。 我®我们 的进度 玎能唳 3 —点 • 箝认赶》致»_ »鰲 3 计划， ^ aaataaft -# 


珐畀代格采完成 Mandelbrot 思形的瑤涪 i + 萁。佴这禕一来也省好 的一 方态，裁们玎认专法乎 
如何值用 Webif ， 线程， ffi 不用爯铊好/ I 夹对闵胡究数#和©像问®。 不过， 我们遂及建议 
你 6 E 好好铕 ft 这卷主 fi ! 


不管怎#,首先襄布苷瑾任务的代玛， 还龙襄 ■'些代®来绘制分形 ® 值中的 各行。 先把达个 
代铒犍入到一个 “ mandelHbJs " 的丈 件中： 


var canvas; 
var ctx; 


湓意 iii & 豉们麩悉的函布和 i 下丈。 


var 

var 

var 

var 


i_max = 1.5; 
i_min -1,5; 
r_min .= -2,5; 
r_max = 1.5; 


这些 基 Mcn^eLlorot 囹奶 ft 炫庞乘 OJ ? 和霣矛 
議的 -1 ■南变雀 e 


var max_iter = 1024; 
var escape = 1025; 
var palette =[]; 

function createTask [raw) { 
var task = { 
row: row, 

width : r owData .ifidth, 


^ SiB 3 S ： 




generaticn ： generation^ 
e min : r min^ 


i:_niaK: r_max^ 

i: i max + (i min - i max) * row / canvas. height t 

™™ 

masc_iter: max_iter, 
escape: escape 


)i … 

return task; ii 个代紱故存 ㈣ MeUJojs 
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成黑_ 乂镇>:…… 


function MtakePalette ft : ~ _ 

:.々 •- ； —-‘ 二 ■- ■ ■■_"__:•■ 1 : .—' ■ •一 _ 、 _7L ■■— ■■•■ - ■' ■ 

functioiiF vrzap ( x )^ ( 、-十 

x - tU + 256) & Oxlffh - 2S6; 
if^ (x < 0) - x ^ "x; 
rettirn ac ； 


A 


运用 JavetS 

Q •郎綱 
Q 射*； 

n 总劫工作 Mai 

Q «jaxtfHifs 

= O —¥ 众麵族 



卜个喷 

' 'i&,t j 冰下 ® 的） —WJ^W 中 (i 用 

巷， 来尤威分衫讀祕衫 H (分形 ㈣ ) 


) 

fox (i* — 0,- i <— this. max_i.ter; i++J 卜 

palette .push ([wrap <7*i), wrapC5*i), wrap (11*1) J>; 


,—^ dr^vv^w 从 H 作技枝保 D ? 吉粟 

^ ^ 柢它 O 給產芩 i 。 

fiinctrlon drairRow (lirork^rResuits) 「 

var valuer = workerHesuit.a.values; 
var pirxelDa^a — rowDat a. d a^ta; 
for (var i — 0; i < rowData■ width; i++} <_ % 忽倉函 

var red *= i * 4; - 布中迗 一 H 的式杉像素 s 

var green = i * 4 + 1;. 
var blue = i * 4 + 2 广 
var a-Ipha s i * 4 + 3 ； 

pixelData=[a-lplia}. = 255; // get a-lpha to- opaque 
if (values[i] < Q) { 

pixe lDat^[red} — plxe 1 Dat a [gr ea n] = pi^elOata [blue] = 0; 

} else {； 


沒 港 ii 个 rowliflUi i 發来劣 
成工 fi, rc>v^at& 个笨 ' 


var color = thig .palette Lvalues [i] k 这 f 值用滇逄板网忒工 fV 线程携时也 

pix^XPats[xed} — color[OJ; ^ f 基 菜 (— 个數 )■ 珀托為 — 个飯爸。 

pixelDatatgreen] = color [1J; 
p Ixel Data [ b lue j — color [2]; 


) 

c t x . pu t ImageD at a ( t h i s. r owD ata , 0, workerResults .row) ; 


^ 个代运放在 it 

4 中 t 


K __^ 这 f 将溪 素写入态痄 i 下 i 中的 


^T\ 

这个 rt 鹆在茂稞 » 悉 5 。达类 
似吁我们 . 在第 @ 耷的槐姨_和查 
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成品分 形代码 



成品代碚 m) 


Mfl^tlbrot^ 箄 M fi 用的全要 H 

function setupGraphics()( 




canvas = docuoaant,g 9 tElementByld<"fractal ,f ); 
ctx - canvas . getContext ( T ， 2 d M ); 尺 

S ■要欲敗從/布和上下之冉设洛 

c&nvas . width — window , innerWidth; tC"*™ 至布的 b 玲茫 * 命專度 D 

canvas,height - window.innerHeight; 


var width- = ( Ci^max - i^min) * canvas-, width f~ canvas. height^; 
var r__mid - (rjmax + r_minh / 2; 
r min ^ r mid^ width/2 ; 
x_max mid + widtH/^; 


4 -— 


以达 *4 ■用庫外 3? Mai^dcLbrot 
#鈐变番 v 


rowData = 




ctx. ere a telniageDa ta (canvas. width_^ 1 )^； 


(用來釦垂布箄薄蚩）^ 


makeFalett ^ 0； 

这 f 勿始化磷疤板，用來将 

MPI ddbrat $铪_制妗一个分形® 嘴 


S 06 第彳 G 章 


达个代 疼 ' 故4越 以认 liferjs 之 








& I . 

运用 Java 



捵品代格（续) 





T ® 达个珙品代塔就是工作线程用采完成 MaNeHsrot * 数学计翼的真体代 
铒《 MawMbrotfti + 髯飴廈力钬在这里体现 （如 菜你想 * 琛入 M 研究 Man < telbn>t 
该，迖也 是你* 兵注的重点 ） 粑这个 代铒鍵入到 " workerlibjs 11 : 




c ⑽ vpateR ^ w # ^ Mflk ^ eLbrot # 的 一 fi 数典 a 
龙的这个蟲盘妓偁一个为象+ HS -朽. 數我辦 
f 的岱郝打苞4 泛个约 象中。 


function conipu teRow (ta sX) { 

var iter = 0; 

var c_i = task,i; 

var max_iter = task+max iter ； 

t 一 i ■ 王砉，巧今鐾 E 承的 3 -户 

var escape = task escapo * h^ sescape ; 哉 们龙 $ 」 故兩个样坏 - 个 ㈤ 

tash:. values - [] ； ^ 左行中的备个嚷索 …… 

for {var i » 0; i < task.width; i++] { 




(if 节 A 簀 4 
%\ A 妗 11 


var c r = task, r 一 min + (task.. r_max - task.r_min) * i / t»«k + width; 
var z r = 0 f z i = D * 


for (iter - 0; z_r*i r + z_i*as_i < escape && iter < max_it«x; iter^+) 
" 2 -> z A 2 + c 
var tJtip — z r*z r - z x*z i 


c r; 



} 

if (itex 
iter 


另 - 个獲坏用来奁找的左 g 个漢素的遠达 
z x = 2 * ^ r * z i + c i ； ^ 的值，泛个内蛹坏決定： 杂行. 也正屋 


••綱 ，魏咖 个 


z r - 


iter) 


■1 


task.valu&g.push{iter }i < 

} 

return task; 


这个代放在 w^rtecrUb js 
之件中 a J 


銪有 ii 签#鹙的结果 4 珥利一个依 ，运个 
$将 fK 加时一个貪名 （ 6 盎婼 中，这个數祀 
爯放入 tasfcM 拿— 

菜发®给生代鹆， 

柝郝分。 
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如何管理工作线程和任努 

倒 建工作线程，为它们分紀任务 . 

有了这些搆品代碚，下面再把童心转向编写具体代码，来创建工作线程并为工作 
线程分配任务。我们要这 样做： 

O 个工作钱 a 数组，#焰时达些工作线我邾基空闲的^ g 外连 

布一个本计 S 任何妁容的©係 ( wexfllow s 0 U 




0迖代处理达介数筠，为毎个空 闲工作 践篯剞建一个任舍: 




0缝綾迭代处理，蚩技个空闽的工作钱我， 为它分 纪任啬 a 下一 
「 个 MmxlZow a U 然后成‘••… 



!A^Xt1^0W = i 
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编写代码 

既然已经知道如何创建和管理工作线程，下面就来编写代码。为此需要一 
个初姶函数，所以先在 mandel.js 中创建一个名为 init 的 函数， 还要在这 
个函数 中加人 另外一些代码来建立和运行应用 （比如 确保已经完成 f 图形 
初始化> £ 


运用 




(3^ 忠 JtWtWL 

feritSKHi 

n 射邃 
□ 洽劫工 ftMH 

H 顬承 




笔先. 龛义一个 4蓍， 色含我们 寿望的矣茲 
今 H 我们洼择工 G 钱俜數完嵌 il 个应用后 

还笱！ i /*$ 说萁他选择^ 



var numberOfWorkers = 8; 这 1 是一个空裝闼 > 用瘃存故溅们 

var workers = []； ^ 的工 0 线沒。 


window.onload - init ； 


下面 sli —个⑽ (处疼伐序.否面 it 加载 
的金调用 kit E 


有一个 s 核的斜 jf 机,辦以 
迖鸟我 们的分3?机敍力烚妨 
西紀 D 不过 Spf 连你沒有 s 个 
核, 0笱當试. e 也聂个不 
抟的送蜂 。 


运个也 成奂代鹆中定义, If 1 r Ti r 将圣布丈 

function ini ^{) { f 一 ■) •读螯巧到 K 赛的 A ->. S 含公瑾另外 一#® 形方® 的刼爷间通 a 

setupGraphlcs (); 


for 


^ - 现 4, 棵典 i 作钱 沒的个发达 代 处理…… 

(var i = 0; i < nuinberOfWorXers; ±++) { …… 汉 ■_woirtedrjs , 划逢一个辦的 1 H 线枝 * 

var worker = new Worker ( T, worker.j e p, ); 夺 这个丈件妓 ID E 沒有編写。 


worker ,o rune s sage = function (event) { 

processWork (event. ta rg^t p event:, data); 

} 




然后枵备个 I m 考砹的消 s 处 理襁 瘩设 i 
巧一个函盘 r 宓会碑角 數， 
OJ 龙威 I 作的 1 作线沒 / 

fl 入达个 as 。 


worker, idle = true; 
workers .puah (worker^ ； 


siiartWorkers (}; 





il 笮一电 … … 震记 d 我们 # 望知 $ 罈些 J ： 作钱枝存工 fl 另外娜 # 
基空 闲的， 磅扑，翼南 m 钱 fi 蹭如一个 m ^u n m 。 这 4 我们 1 3 
龛义的屏沒，石不属子 web 工 n 钱沒 api 的一郃分， 0 前光鈀它设 I 碎 
t^e + ©的我 fD 还沒有兩 X5 钱沒分紀仔闲 


将邮劍 澧的 5：0线荇坩汆刊 
wori ^ rs 廬逊, 


蚤后，奄 J 在茗个吋剔让这毋 Ifl 錢程矸始1作。衿这普代 .4$ 兹存 
—个名老 startmrteers 的函. 裝中. 这个函盘甭#戟们乘鵁写^ 


( i 个 rt 接致在 kwd^eljs ^ 
辞中。 


你现在的位邀、 
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启动汙形工作线荇 


启劫工作线程 


OK ， 我们需要解决几个问题，首先要启动工作线程，还要编写能够处理工作 

线程返回结果的函数，另外，我们还需要为工作线程编写代码 & 下面首先编写 
启动工作线程的 代码： 


0" !^3ilfML 

0" : 制 1 * 

1 

□ 苌 * 工 0 酿鼉 


□ itJIlil 

多梦 1 

n » 户交置 代磚 

1 




茶个 f 姿变著。 

nex^Row = 0; 
var generation = 0; 


function startlfo:kers () 
generation++; 
nfiac'tRow ~ 0; 


華个启金铉处 H 图偉过 枝中公 这糾游 


下 ^ * 用户放大 Mfl 蘅簿 H < 洩们 食矸诒釾算一个斬的 ® 薄， 

?多少次。后®衾劝 CA 个内審傲更多介绍 

让 artwtorhrs 函教将名劫工 0 鸹锃 f 如莱 用卢放 A 囲 d 也 
^ ^ lfl^/1 , 所以 t ^;Jai 郝含将 

1 1 # A 4 ik 舻内 C 



for (vat i = 0; i 
var vorkdr 


< 




if (worker, idle} 


var task 


wor k er,. la ngth; i ++ ) { ^ 柏綠含 M 楚 用 “ 

个变 

workers [i ]； ^ 

规在 # 琛公理 workers 數函中的 W 布工 ft 
钱枝 …… 

…… 奎着 i<1 线枝基 * 空 »• 

createTask (nextRow),- 

釦莫弒婷这个 I 作钱 沒分 ft — 个仔务。这个 
f4 务就 甚錡奪 MflMfiLb 欣 $ 的一行 c 
nLCrdeLUbj 基中定疋，洽金送 © — 个 t ； 邮 対寒 ，真 
中 & 含 z 0 线沒舒 S 这一行 M 着的含部蛊孩 。 



worker, idle = false; 
worker.poatMessaHge (task) 


nextRoir++ J 




现在 S 经老 X <1 钱 fi 分 -签 Ifl . 卿 ■将 

0 i 说的它规旮猓杧_) D 


孩歧 ㈣. 昶含孖诒钍理这个 仔 务 


蚤后，拷打數邊坩，角 It/ 下一个 I 僻钱 
汉含 ffHT -矜, 


这个代砝故在办办 Ljs 
亡_中 。 
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实规工作线程 

既然已经有了启动工怍线程的代码，还能为这些工作线程分别传人一个任务， 
下面就来编 H 工作线程代码 u 接下来，一旦工作线程计算完它那部分分形图像, 
我们所要做的就是处理来自工作线程的结果 D 不过，在为工作线程编写代码之 
前，先来简单回顾一下它的工作： 


运用 . : :. rapt 


3 


S s- V _ 

@ & a r ff 议 

n 隹嫌 i 订 * mi 

□ *tnum ^ I 

□ 播户交箄 代成 

----- — ■ 





A 角 p » fMe » ane 交猞工作 

个任舟 c 


0 工作 Ma 釋到达會任务.挖它窃鼉轮一个成 


computeRow( 


A 计寘的 这一行 B 轻免成，鶬《 
w 它崖®餘 i 员■代铒夺 


❹栴 另一个 poitMe » a ^ e 从工忭 M 我龙钽姑累 》 


所以下面就来实现这个过程， 可以 把下面的代码键人到 worker . js 文件中 a 


f 走用 ^ Awor ^ H ^ bjs 成其代 
砝 .Ci 样工 (1 钱伐妖芍以诱用达个 庳立缚 
中宠义的干 wURow 函教 : ！ 

厶 

Impcr^ScriptrS ( 1l worlcerlib. j s "} ; 
onmessage = function (task) { 



工 fM 考枝 只乘遘 ^ H 9 说理沒夺。它 
不 f 晷傲仔何萁 铋事 (B 妁它震傲的妩！ 
考场来 t) 的消总科始 1 0 ! 


} 


vax worker Result = computeRow {task . data }; 

从 ㈣ _ 數 1 吞把达个數 ㈣ 

posUSsssage(workerResult); :备數 这个圣數含龙 ^ MflvtddLbir^tt^ ft 65 W xt- J- ^ T 0 

个 ’ 

使用 fo ^ tMe ^ age 鸩銪 S 的结菜 (保存在 t 

work£rmsidt 淦 f 中） f |(5 I 代砝， 这个代砝放在 wortefirjs 

之 _ 中。 


你规在的泣 M * 
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分形任务特写 


稍事体患…… 

虽然只有几页，不过我们给出的代码可不少 g 下面 
稍稍休息一下，加加油，同时也填填肚子， 

另外我们认为你可能想简单看看后台，了解一下工 
作线程的任务和结果究竟是什么样（后面会看到, 
它们非常相似> e 所以，拿瓶汽水，趁休息我们来 
看一看…… 




任务特写 -- 

你已经见过 createTask 和 postMessage 调用，它们都使用了 任务: 

var task = createTask (nextRow )； 


worker ,postMessage{taak )； 


你可能想知道任务 ( task ) 究竟是什么样。嗯，它是一个由属性和值构成的对 
象，下面就来看一看： 


宪威釾 Kftf 的含 

部 fit 。 


task 





—* 




row ： 1, 
width : 1024 , 
generation: 1 
r—min: 2 „ 074, 
r_max i -3 + 074, 
i: -0.252336, 
majt_iter ： 1024 r 
escape: 1025 




杉 iH 故大 3 多: h 欠:后$含了輯 ( i 个 ffi 如 
何该用…… 


sc 

一 这 些控軔51铸 1} 的铛累痄度 b 


}; 
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鈷果特写 - 

工作线程中计算行得到的结果呢? 


var worker Result eompu'teRow (t,a q k, data); 


postMessage (worker Re suit )； 


结果会是什么样？它们与任务非常 相似: 


运用 JavaScr^^ 





work e^Re suit , = { 



row : 1, 、 

width : 1024, 、 

generation : l f 

r — min : 2.074, | 

\ ，与仔务中 _ 样。(1-魚軸、 

2作故往珥约传给它的任务，然 
后坩加 一个仰 kes 属 fl , 其中 
起含4函4 J ; 給鉍达 一 H 讲乘 

r max : ^3.074, 

i : -0,252336, 
maxiter : 1024, j 

escape ： 1025^ 

啥，仿这一个 t 新的。 
/_ 这蝥甚备个像嚎的 d 
^ 汪乘 t 禎射趵觖邊（这 


value ，： [3, 9 r 56, 

-1, 22] ■在 rirawRow 中宅成 ） D 






漆 上路？ …… 

惑谢你花时间陪我们査看了任务和结果 D 最好再喝 
L 4 汽水，我们义该上路了！ 




你现在的位置 ► 
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处理工作线程结果 


重矽 代码： 如何处理工作线 
程的结果 

既然已经了解工作线程的结果，下面来看从 X 作线程得到结果时会发 
生什么 □ 应该记得 I 创建工作线程时，我们指定了一个消息处理程序 

调用 pro ces a Work ： 

var worker = new Worker( fl worker.jg; 这个汩 臬让 理糢厚 1 课用 K 拷 

worker.onmessage = function(«vent) { K 这龙接供 0 杉 、 ® 衫妖展发出數轉 ^ ^ ^ ^ 

processWorkievent. target, a vent.data); 沒的 ？ 1 用： 

} 


ETSiF^^B 

Q " - 

觀 Jim 

n 处砘结果 

□ 明户交 5 代码 


工作线程向我们发回消息来提供结果时，要由这个 pro cess Work 通数处 
理结果。可以看到，向这个函数传人了两样 东西： 消息的目标和消息的 
数据（也就是任务对象再加上对应图像中一行的值 ） 所以我们现在的 
任务就是编写 processWork (把这个代码键人到 mandel . js 中）： 



function processWork (worker, workerEe9UIts) 
drawRow(irojrlctirResults); 
r e as s i gnWorker (worker); 

} 

就快达到目 标了， 既然提到 rreassignWorker , 现在就来编写这个 
函数^它的工作是这 样的： 使用 nextRow 全局 变董检 查我们正在计 
算的行，只要还有要计算的行（可以通过査看画布中有多少行來确 
定），可以为工作线程分配一个新任务 D 否则，如果没有更多工作要 
做，可以 简申地 将工作线程的 klkM 性设置为 true 。 把这个代码也输人 
到 mandel . js 中： 

function reassignWorJcer (worker) { 
var row = nextRow ++； 


将结 果 f4 ii i>)drawj^w, 4 画 ® I : 铨 
制 (i 盐係秦:， 

以为 奋重#分® 另 4 —个仔务。巧此，墨斑 
写一个蕋 r&a ss E.g ^Wor^r D 


巧工 ㉟ 愆⑼ 


if (row >= canvas.hQxght：} { 
worker. Idle = tr m. 

} else { 

var task — createTask(row> 
worker,idle ^ false ； 
worker .pos tMessage (task )； 

} 



如屎这一行丈子威 芩子函 4 的惠度，茂明6钱大功苦威！ mn 
6绍用 工作 钱伐錡 K 的结粟迠充: J 整个冱布， 


C^iWfls 基一个全易変暑 ， 存凾教中 ^sctw.'pqraphios 5^ 
设置。 

不过 ，如果 H 有耗他 fj MijM r 軚龙錡下一个 
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运用 JavaSc 


% 


梦幻测试 

代码已经够多了！下面来测试一下。在浏 
览器中加载 fractal.html 文件，看看你的 
工作线程如何工作，取决于你的机器，你的 
Fractal Explorer 应该比以前稍快一些。 

我们还没有编写代码来处理浏览器窗口的大 
小调整，也没有处理点击来放大分形图像。 
所以目前你能看到的就是右边的这个图像。 

不过，嘿，到目前为止还不错，是吧？ 



看 M 了！ 不 ci ； r ■秸放 A , d 苟不好，另 

我们已经让工作线程行动起来，开始计算 — 集，井向我们返赠级 
果，从而能绘制在画布上，但是如果点击放大会发生什么呢？幸运的是， ' ^ ~ 

由于我们使用了 T 作线程在后台完成大强度的计算，所以用户界面可以很 
利索地处理你的点击。不过，还需要编写一些代码来具体处理点击事件. 

我们的做法如下： 


© 黹先增加一个处瑾程序，負贵处3鼠标点击，爱圮位，庄击單件发生在奐確元素 
土。为此.只纛栗灼基布的 ondidc 禺性增加一个处理猙序，如 


还爨⑽ 格 

is fa 

□ ，户交直 《« 



canvas, onclick ^ function (event) { 
haLndleCli.dk{evdnt. clientX, event 


■clientY) 




}； 


如某点忐了函 4 , 軚含戊 
闲蚤數 ha *^ UCL [& le , 冉孩 


栴达个代码埔加到 “matiddjs" 文许 l"lt 备教 中的时 tUpftrapMM 壜闲 T 蔘， 


© 现 在?=：*翥編写 h 如 dleCliek * K & 在具体縝尨么前，先來考虑一 T : ffi 户至**布时，达说明他 
们希蟹绞大所点击的筹部钤 JS 域（玎从甩®到说5齣单线®瞄辜 

http://wickedlysmart.com/hfbtml5/chapterl0/singlethread/fractal.html 

屬麝真体是怎么做的> Q 所呔. ffl 户点击的， a 们鷺翼得到铯们遇曩放大的里标，然涪让箝 
奄工作线®投入工作，开庳创建一个 新积值 a 另烊庄*圮伐，敌们 B 轻 笮一个 &數为所有空闲工 
作 线|1 分£柘工作： stariWorkers , 7 «鉍来试一试…… 


你现在的位1 


515 













测试和 


传入魚 忐的人 认兩私 iM 兩 

用户免击函布放 A 分彤®像的， ^ 户焦击 1 承$的满个佶 E 。 

含瑀用 h a d Lectio 。 、 // 


function handleC 1 i c k {x, y) { 、 

var Kidth = r max - r_min; I 

var height ^ i_min - i“majc; 

var clicker = r_min + width * x / cjanvasiwidth,* \ 
var click_i = i_max + height * y / canvas .height H . 


S J4 女金锎 

这个代溪含渦竹翼的分衫这该 
<•), 将铪晃作馮軔这蜮的中 

(象电 扣钧吮宽泰比。 


var zoom = 8; 

r_jain = elick_r 
r max = click r 
i_maac = click_i 
i min = click i 


- width / zoom ; 

+ width/zoom; 

- height/zoom; 
+ height/zoom ； 


le stai 5 蛑 in 钱疗釗 逋仔 务辦用的全易 
故丈级糾 ( z 醜 )础耷分衫彤译的放大杈度，这 
含蝻 tMH 的，? f ffi 。 


BtartWorkersf) ； ( — 现 4 : 後 备重弟 4 刼 I ： 6 线炫 


ii 个代砝故右 
» L £ ri/vdeLU 

件中 s 


爯傲个测试 



下面来测试以上所做的代码修改 D 在浏览器 
中軍新加载 fractaLhtmU 这一次点击画布上 
的某个地方。点击后，你会看到 X 作线程开 
始创建一个放大的视图 0 

嘿，现在你应该町以开始探险了！尝试几次 
之后，下面再做最后几处修改， U ： 这个实现 
尽善尽美。 


不抟 f 可以放丈 5 ,不过 
这 f JNU 整菡 4 大小.让 
它龙 f 占潢我们的穿 0 。 
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让©布占满浏览器窗 13 

我们说过，希望这个分形图像占满浏览器窗口，这说明如果窗口大小改变， 

也需要调整_布的大小。不仅如此，如果修改了画布大小，还应当向工作线 
程分配一组新的任务，让它们甫新绘制分形图像，占满这个新的關布大小， 

下面就来编写代码，将画布的大小调整为浏览器窗 u 大小，完成之后还要電 
新启动工怍线程， 

_ 保枵函4宽度和息度设 

function resizeToWindowQ { ^ " 惠寿耷穿 0 的射宽度和 本度 - 致。 

canvas.width - window.innerWidth; 
canvas + height; = window. innerHeight; 
var width = {(i_max - i_min) 
var r mid = (r max + r min) 

mmmr 

r_min = r_mid - width/2; 
r_max = r_mid + width/2^ 
towDats = ctx. create ImageD a ta (canvas .width, 1); 

还有一个爸運方®的鉍苷 ^ 我们璉用了 _ 个前®没有幻 
论过的會晏定 •！ ： iwisata D 差一个 ! ⑽ gemtfl 的 

象， 塵用来 4 函 4 上鹼剃一行礞索、 ^ vl t 试 § 函 4 丈 

时，笫 ff 新劍的象， 使 t 的宽 t 鸟 S 布的 
駟宽度相同: ，杳看 Pocn ^ LLLbjs 中的圣數咖 awr^w 了箱 
釦何 fi 用⑺心咖存 圣 4 i 铪科琿棄,， 


现在■要再做一件 事情： 调用 resizeToWindow 作为浏览器窗口大小调整 
事件的处理程序，做法如下 : 

window.onresize = function 0 { 
resizeTcWindow0; 


可以把这个代码放在 mandel . js 的 ink 函数中，就放在 setUpGraphics 调 
用下面， 

这个代鉍放 4 

_ 中。 


s tartWorkers 0 /「 

s 


* canvas, width / canvas .height ); 

f 2; Sf 

瘃的任（粟綠侈分衫 ©緣 S 袅各 

瀵 奂耷， 兩 B # 為穿 o 的宽惠 比）。 


运用 Java ^ ori^t 


0" 芒戌工⑴拓 

0^ »»J| 森 1 

0" 尨 15 廠 au ! 

n …置⑽ 


你现在的位遵 ► 
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管理分形的 


吆毛求 疵的玄程序员 

还有-个问题，虽然我们可以不去管它，但是如果没有它，代码看上去可 
能不太对劲。我们一起来考虑：假设你正在让一组工作线程辛辛苦苦地处 
理它们的行，突然之间，用户放弃了，又一次点击屏幕来放大图像。这可不 
太妙，因为工作线程一直在努力 工作， 处理它们分管的各行，现在用户却 
想放弃，要改变整个图像，这会让之前的所有工作都白费。更糟糕的是，工 
作线程根本不知道用户点击了屏幕，仍然打算返回它们计算的结果。还有更 
糟糕的，主页面中的代码很乐意接收和显示这一行！虽然不像到了世界末 H 
那 么糟， 但是如果用户调整了窗 U 大小，我们也会遇到同样的问题。 l / 交碟了 

现在你可能不会注意到这个问题，因为井没有太多的工作线程 T 而旦这些工 
作线程可以很麻利地为新囹像计算相同的行，覆盖原来那些不正确的行。不 
过，不管怎么说，就是感觉不太对劲。不仅如此，其实这个问题很容易修 
正，所以下面必须做出改进。 

3然必须承认，我们原来就知道会有这个问题，你可能还记得之前加 
人了一个小变量 generation D 还记得吧，每次重启工作线程时都会让 
gene rat ion 的值递增 3 另外应该还记得来自工作线程的 resuks 对象：毎个 
结果都有 " generation " 厲性^所以我们可以利用这个“代”，来了解是从 
当前这一次还是从前一次可视化得到的结果。 

下面來看代阿修正 T 然后再来讨论它是如何[作 t 编辑 mandel 中的 
processWork 函数，增加下面这两行 代码： 


function processWork (worker # workerEe9UIts) { 
if <%roxkerEe»ults .gttn0x«tion generation) 
djrawRow (workerRe suits ’)； 


检釜工 G 錢伎的讀瞿 
f 它的 — rt " 島必箱' 

1 否—致 。 


K；1 \ 

reasaignWorker (worker); 

不於哪种 04r^6lffii 
沒囔扣 分釔新的工 fh 


说氓 ii 个结果4旧的 + 将它忿略 & 


所以，这里所做的就是先检査，确保我们处理的当前“代 M 与工作线程结 
果的“代“ —致。 如果是这样，那么太好了，只需要绘制这一行^如果不 
一致，这说明它肯定是旧的，所以只需将它忽略。工作线程为它浪费了时 
间固然很糟糕,不过我们可不希望在屏幕上绘制“老”图像中的数据行。 

好了，终于完成 r ， 千真万确，现在确保键人 了以上 修改，做好准备… ■ 


很抱歉 ms 老芗 
.嘌，爯有几页軚刁 


壸看 
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immhmk 


最后的测试 f 




大功告成了！现在你应该已经完成所有代码。将 
fractal . html 文件加载到浏览器，看看你的工作线 
稈如何开展工作。这个版本应该会比原来的单线程版 
本更快，而且更有响应忡。如果你的计算机是多核的, 
速度会快得多。 

现在可以放手尝试……放大 • ■■…开始探险吧$如果 
你找到 Mande!brat 集中未被发现的“国 土"，淸通 

知我们（如果你 M 意，还可以通过微博把截墀图发 

给 # Mhtml 5) 。 


A v ' * C 

运用 


0 " ^以咖 

Q'WBtxftliii 

FT 岛的 ..mi 

③痛 paa 

珣广丈 aft 铒 


魚在,放大 f 

\k 


现存可以粑孱畢太 .HI 
整为 f 4 何杉徒崁大 .)■! 


IJP^M 

wanlr. riKTU 


W ■- 


ft 


T .■ - n 4 ■- - 

. M I 


l^hUp • 
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实验室生活 


如果你在编写高性能 代码， 可能想知道工作 
线程的个数对应用的运行时性能有什么影响^ 


现存 e 个續部在努 
力工作,裁_ 
分形4«真的饫 
15, 


O O O 


如果把工作线程的个数设置为2,或4,或16, 
或者32,你认为会发生什么？或者设置为介 
于这些值之间的某个数呢？ 

可以在你的机器上试一试，看看哪些值对你 
来说最适合 D X 


为此，可以使用 OS X 或 Windows 上的任务监 
视器。如果退回到我们原来的版本（单线 
程版本， http :// wickedlysmart , com / 
hfhtml 5/ ohapterl 0/ singlethread / 
fractal . html ) f 性能可能如右图所示 


我们的机器上有3个核，为了与之匹配，所 
以在使用了 Web 工作线程的 Fractal Explorer 
中，我们将工作线程个数也设置为8，即 
numberOfWorkers = 8,在活动监视器 

中可以看到，所有8个核都得到最大程度的利 
用。 


III 1111 


pnPHpnHHHil 


戧们的机器有2 个相。 货中一个核己兮 
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S ^ M i NDELBI?OT 集中找到的新位 
置贼在这里 
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更多工作线程 API 功能 




# r f 


色 i 





•任 覷承參 


挪 
# 


处理工作线程中的错误 


终 it 工作线我 

:任务，任务完成时，你可能想清除 
作线程（匕们确实会占用浏览器中宝贵的内存 l 可以在施 
面中由代码终止 I 作线程，如 

worker, terminate {) ; 

i 口 线程拾好正在运行，工作线程脚本会异常中止，所以使 

，时心。另外，-旦终止了一个工作线程+就无法再重用了。 
f 小必须创建一个新的工作线程。 

还可以通过（从工作线程内部）调用 close ( L 让一个工作线程停 
止工作。 


如果工作线程中出现 f 严重的错误会怎么样？如何调试？可以使 
用 0ne rr Or 处理程序来補获错误，还可以得到调试信总， 如下： 

worker + one riroir = function (error) { 

doc ument . ge tElemen t By Id <" output f, } .iei n & rH^ML = 
，T Thexe was an error in ■’ + error. filename 
"at line number n + error, lineno + 
ti: _f + error* mesa age; 

) 


— ir 


i 
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运用& 


值用 importScripf s3i 2 —个 JS0WP 请求 

不能插人新的 <scri P t> 元素从工怍线程建立 JSONP 请求，不过可以使用 
importSoipts 来建立 JSONP 请求*如下所示： 
function make ServerRequ © st () { 

importScript 3( ,1 http ：// SomeServer , coin ? callback - handleRequeBt T, ); 

} ^ S 

function handleRBquest { r © Bpon ? ie ) { ^ ^ KRL 查洵 今笆含 

^ fS] T® JE, Jff! m ii ■人 J-* ** 

postMes sage ( response ); V ^. ^ 



令 


m 

■加 


vi f h } 参較 


makeServerE^que () 


工作线猩中使用 seilHterval 


你可能遗漏了这一点（我们的进度太快，只有一个例子屮使用了这个特性），不过要知道，可 
以在工作线程中使用 setlnterval (和 setTimeout) 反复完成同样的任务。例如 1 可以更新“名自 
工作线程 (quotejsh 让它每3秒发送一个随机的名言，如 F: 

var quotes » [ U X hope life isn't a joke, because I don f t get itJ', 

T ， Ther« is a light at the end of every tunnel .just pray it f s not a trainl 
"Do you believe in love at first sight or should I walk by again?' 1 ]; 
function postAQuote{) { 

var index = Math. floor {Math. randomO * quotes, length); ? 把么篆”移 ^ … 

\ ppStAffiKOtt & S： T. 

pc stMes sage (quote s[i ndex ] J ; v r 

J 

poatAQuoteO ； - < 1 用 即盔出一个名 f * 挥后设 1 一 

setlnterval {postAQuote, 3000 ); 


个 闵掙柒 名言 r 廷 (I - 个， 


1 争工作线我 

如果工作线程完雌紐碰要娜，孤舰它自⑽ T 怍线 S: 酣你为工作线 
程分配了要处理的图像 区威， 这个工作线程可以做出判断，倘若瓦域大于某个大小， 

它就会把这个任务分解到自己的子工作线程来完成 13 
工作线程创建子工作线程的做法就类似千贯面代码屮创建 11 作线程，如 

var worker - new Worker("subworker.js"); 

要记住，子工作线程与工作线程类似，也是重量级的。它们会占用内存，并作为单独 
的线程运行口所以，对于创建多少个子工作线程一定要当心 & 
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Web 工作线程回顾 


POINTS - 


■ 如果没有 Web 工作线程， JavaScript 是单线 
程的，这说明它一次只能做一件事情。 

■ 如果交给一个 JavaScript 程序太多的工作， 
你可能会收到一个 “slow script 5 " (脚 本运 
行 缓慢） 对话框。 

■ Web 工作线程在一个单独的线程处理任务， 
所以主 JavaScript 代码可以继续运行，用户 
界面可以保持响应。 

■ Web 工作线程的代码放在与页面代码不同的 
一个单独的文件中 & 

■ Web 工作线程不能访问页面代码中的函数或 
DOM 。 

x 页面中的代码与 Web 工作线程通过消息通 
信。 

■ 耍向一个工作线程发送消息，可以使用 
postMessage 0 

■ 可以通过 postMessage 向工作线程发送字符 
串和对象，但不能向工作线程发送函数。 

■ 可以将工作线程的 onmessageiS 性设 置为一 
个处理函数，来接收由工作线程返回的消 

息口 

■ 工作线程将其 cinmessage 属性设置为一个处 
理函数，来接收页面代码发送的消息。 

» 一 个工作线程准备发回一个结果时，会调用 
postMessage , 并传入结果作为参数 s 

«工作线程结果封装在一个事件对象中，并置 
于 data 厲性中。 


_ 可以使用 event.target 厲性查 找哪个工作线 
程发出了消息。 

■ 消息在主页面代码和工作线程之间会复制， 
而非共享。 

■ 可以使用多个工作线程完成能分解为多个任 
务的大规模计算，如计算一个分形可视化图 
像或对光线跟踪图像 

■ 每个工作线程在它自己的线程中运行，所以 
如果你的计算机有一个多核处理器，工作线 
程会并行运行，这会提高计算的速度 0 

_ 可以从页面代码调用 worker . terminatef ) 来终 
止一个线程6这会中止工作线程脚本。工作 
线程还可以调用 doseO 让自己 停止工 作。 

■ 工作线程还有一个 onerror 属性。可以把这 
个属性设置为一个错误处理函数，如果你的 
工作线程存在一个脚本错误就会调用这个处 
理函数。 

■ 要在工作线程文件中包含和使用 JavaScript 
库，可以使用 importScripts 。 

■ 还可以使用 importScripts 来利用 JSONP 。 要 
在工作线程文件中实现传入 URL 查询的回 
调， 

■ 工作线程不能访问 DOM 或主代码中的函 
数，但是可以使用 XMLHttpRequest 和:^地 
存储。 
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HTJVJ 厶 5 镇字游姨 



哇，已经到第10章了，终于完成了，坐下来，放松_下， 
让你的左脑活动活动，把这些知识牢牢记住 • 下面是第10 
輋的填字游戏 s 




横向 

4.可以使用 postMessage 向工作线程传递_ 

8. 处理器同时完成多个工作的能力 e 

9. 用来注册一个处理程序来接收消息的属性。 

11. 工作线程不能 访问― _ 

12. 第一个例子使用了这个游戏. 

13^最著名的分形。 

14. _/工作线程。 _ 

15. Mandelbrot 周边一个美 HH 的区域称 

为_ _ _ 谷。 

16. 编写第一版分形浏览器的人 e 


纵向 

L 工作线程可以使用 XMLHttpRequest ， 还可以访问 

2. 如何将额外的°代码导入一个工作线程。 

3. 执行_。 

5. 如何中止一个工作线程《 

6, Mandelbrot 使用 _ 数。 

L 如何创建工作线程。 

10. 管理器和工作线程通过这些通信^ 
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练习 



粉演浏览器答案 

现在你嚴你是执行 JavaScHpf 的濟 3E 縣 


window^ onload s funcfcionO 


var worker = new Worker (worke jt T j s fh ); 
worker, onmessage = function (event) { 
alert( "Worker says + event,data); 


for (var i - 0 ; i < 5 ； i++) { 
worlcer.postMessaga < f, ping rr ) 7 





〜鄱承 ♦ 


戠们含 

fff)5 ■个 'worlR^r sfltJS 域每 



window, on load - function {) { 

var worker = new Worker { 11 worker.j ® 11 )； 
worker.ommessage - function Cevent) { 

al«rt( M Worker says n + event.d*ta>; 

} 

for (var I = S; i > 0 ； i —— ){ 

wo rker .postMes aagef' pong n J ； 

) 


windoir. onload = fursctionf) { 

var vockttr = new Worker (*'worker^s""); 
worker. onma$ sags = function (event.) { 
alartrworfcei: says + event.data); 
worker . postMea aaget ^ ping ^ J ; 

} 

vockezr.postMessage [ ,f ping ,F J; 


window, onload = function(> ( 

vat worker = n«w Works r {"worlter.j b ，r J ; 
wQrker.onm«a44ge = function (event) { 
alartf^Workeir says ■_ + event.data); 


setlnt^rval ( pinger f 1000}; 


iflij 沒将®略这# 诮惠， 它 

■ __ Ba jl B «B + ei Ba ■■ + + B + m a ■■ ，■号 如 

沒有铪出。 

■ B ■ " ■ ' * • r ■ 囑 ■ 通 ■■ ■ ■ » . # , + B ■ 矗 ■»,+ ■■■■ 


一个的」爯盔这另一个 

■ • ■ » ■ + ■ +^ a B ■ B ■办 ■ * ■ + sr 露 ■■ 匯 ■ B ■ t f + 篇 r ■，謂 ■ /■ ■ + p ^ T ■ ■■匯 

…章道 A 二个秃 m 贫見 . + 炎. 

. . _____ 


d 金备#盔出个, 辦 

■ J ■■ + ^ + -T--..®.. - - > 4 «■ ri I. ■ . . ■■豳 + ■■ ■■ 編 ■ 

MS 攻葳达一个吋戰们 

.. XP 4 I --. F !. r . >>«>«> + P + i . ■■ ■_ _■ •>■ P - + *■«■ ■■■■_■ 

.… .燕 貪丹拉 …… .. 


functioTi plngorO { 

worker B poatJ4es9ftg« ( lp ping rr ) f 
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虽然工作线程 -- 般通过消息得到 X 作号令，但并带必须如此 

简洁的方法 t 可以让工作线涯和 HTML 漂亮地完成工 作。 如~ , 

代码要做什么 t 请在下面给出描述。 



<!cfbctype html> 

■ ihtmMctn 9= M en M > 

<head> 

<tLtfe>Quotc</+itl€> 

<metc charset="utf-8">- 

</head> _ 

<body> 

<p fd=_‘quote"x/p> 

<script> 

var worker = nc w-Wo r ker f 11 qgote, js" 1 j 
worker.onmessoge = fufrctfof\(event) { 

document .get EI emen t ByldCquote"). I nne. r H TML = event r data; 


</script> 

</body> 

</html> 

var quotes = ["I hope life isn't a joke, because I don't get it:, 

There is a light at the end of every tumel„..jLKt pray it’s not a train!' 
Do you believe in love at first sight or should I walk by ago in? 11 ]; 
var index = Moth.f loor(AAath.randomC) * quotcsJengtK); 


postMessoge(quo+es[ index]); 


iif 甚你的尨注 



i rt 踢由 14 i | 个名言,把它坩加 f _) 赍蒼的 < p > 尤素中。 

■ 9 ■ 9 av m i m t m m ■ r 4 tori I- fl » ■喹 pS + ， .S ■ 咩 . ■«■+»'»• ajii.ta i ■ t t b ■ ■ j. ■ 4. b ji ■ ■ ■ a ■ « ■ ■ bi ■■画 m m ■> V r ■ i. iinBBiBtBir ^ r ■■■■■ i #■■■¥■■ r 
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广％ 

HTAU >5 镇字猓谀奢实 、^ 
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运用 JavaSaflf 





拂贺你 / 

鈐子到鈐点 3 


当然了.后面还有一个附录 D 
还有索引。 

还有 封底。 

然后还有网站…… 

实际上，这是无止境的。 
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附彔：其他 


*( 我们没有谈到的) 

十大主题 




一 國 

\w 

/T- - W 

« T 




我们已经介绍了很多，这本书也快要结束了 ， 我们会想你的,不过在 

你离开之前，还要再做一点准备，否则我们实在不放心让你贸然进人这 
个纷乱的世界。我们不可能把你需要知道的一切都放在这样短短的一章 
里。实际上，我们原先确实加人了（其他章节中没有谈到的）需要了解 
的有关 HTML 5 的所有内容，只不过把字体缩小到0.00004。这样才能放得 
下，可惜没有人能看得淸。所以，我们最后还是删去了大部分内容，只 
把敁軍要的部分保留在这个“十大主题”附录中 & 


这一回真的是本书最后一部分 f , 当然，除了索引以外（这也是必读的 
_部分 ） a 

这是新的一章 531 






















Modem izrwi 音频 


*1 Modernizr 

在这本书中，你可能已经注意到了，要想检测浏览器对一个 API 的支持，并 
没有统一的方法。实阮上，几乎每一个 API 都会采用一种不同的方法检 
测。 例如， 对于地理定位 API ， 我们会査找是否有一个 geolocadon 对象作为 
navigator 对象的属性，对于 Web 存储 API, 则要查看 window 对象中是否定义 
了 iocalStomge, 另外对千视颊 API, 我们要査看是否可以在 DOM 中创建一个 
video 元素，诸如此类。肯定还有更好的办法吧？ 

Modernizr 是一个开源 JavaScript 库，提供了一个统一的接口来检测 
浏览器支持 Modernizer 会负责不同检测方式的所有细节问题，甚 
至会考虑较老浏览器存在的所有边缘情况。 Modernizr 主页地址为 
http ://www, modern izr.com/ 

Modernizr 得到了众多开发人员的支持，所以你会看到 Web 上已经在广泛使 
用。我彳 I] 强烈推荐使用这个库， 



在荧 ® 中包言 Modernizr 

要使用 Modernizr, 需要在页面中加载这个 JavaScript^。 为此，酋先要 
访问 Modernizer 网站 (httpiZ/wnw^modernisr.com/download/), 
可以在这里定制配置一个库，其中只包含你需要的检测代码（或者，既 
然能得到所有检测代码，当然可以全部下载）。下载之后，把这个库 
存放在你选择的一个文件中，并把它加载到你的页面中（可以访问 
Modernizr 网站，其中还提供了更多教程以及有关诂佳实践的文档> B 


如何栓删支持 

一且安装 了 Modernizr ，检测 HTML5 元素和 javaScHpt 
更为 直接： 

m 』 蝌有检洌部采用一致的方式。 ^ ^ 


沒明： T . q 差用乘龙 
成 APi 检谢, 这刁以栓测的 ass 辑 
性，视 频鹐轉 砝蓉和罹多犮他方® 
的支抟。 


API 就容易多了，也 

if (Hodernizr. geolocation) { 

console + logYou have geo! pt ); 

} 

if (.Kode ： mi2r ， lcK ： 在 lstoxr 在 ge) { 

console.log("You have web storage，”) 

) 

if (Mo de mi % x * vide o J { 

console.log( 11 You have video!"); 
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HTMLS 利用 <audio># 素提供了一种在页面中播放音颊的标准方 
法， 而无需使用插件： 


<a\idio arc= ,T song.inp3 M id:"boombox" controls^ 

Sorty but. audio is not supported in youx browsQz： 
</audio> 





其他 



秸鸟棵姨类鉍（必疼龙遏今视頻） 


除了<仙虹0>元素，还有一个相应的音颊 API (Audio API) ,其 
中支持你希望有的一些方法，如 play、pause 和 loacU 如果你觉得 


听上去很熟悉，没错，确实如此，因为音频 API (在适当的方面） 
与视频 API 完全对应^音频还支持视颊 API 中可以看到的很多域性， 
如 src、eurrentTime 和 volume。 下面给出一些音频代码，希望 
你能由此 r 解如何在页面中结合一个元素使用这个 api : 


var audioEleroent = 

documen-t, get£ leniency Id ("boombox M ); 

audi oE lenient. volume = , 5 ； 


得列音硪; t 舞的一个？ I 用，然后 
将滅丰.孖诒旙故。 


audloElenten-t.play 0 ; 

同样类似 T 视频，每个浏览器实现的音频播放器控件（通常包括 
一个进度条，以及播放、暂停和音量控制控件）都有各自不同的 
外观。 


除了简单的播放功 能外， 音频元素和 API 还提供了很多其他控制 6 
与我们对视频的处理一样，可以隐藏音频控件 T 通过代码管理音 
顿的播放来创建有趣的 Web 体验 D 利用 HTML5 t 现在完全可以做 
到这一点，而不再需要使用（和 学习） 插件并因此引人开销^ 


眘频编码的标准 

很遗憾，同样与视颊类似，音频也没有标准编码 Q 目前有3种格 
式很流行：mp3、 wav 和0踩 Vbrbis 0 你会发现，对这些格式的 
支持茌不同浏览器上会有所不同，各种浏览器中对不同格式有 
不同程度的支持（写这本书时， Chrome 是唯——个同时支持这3 
种格式的浏览器> 
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jQuery 


*5 JQuery 


jQuery 是一个 JavaScript* 它的目的是减少和简化处理 DOM, 使用 Ajax， 以及 
向页面增加视觉效果所需的 JavaScript 代码和语法 3 jQuery 是一个相当流行 的库， ^ 
得到了广泛使用，而且可以通过其插件模型扩展。 

现如今，用 jQuery 能做到的 hvaScdpt 也都能做到（我们说过， jQueiy 就是一个 
JavaScript 库），不过 jQuery 能减少需要编写的代码，它在这一方面能力很强。 


龙记 AjM 軚4使用 
XMU - ttt ^ R ^ tiCSt $ v ) — 
个名字（类似弟备耷中的 
細 6 


从 jQuery 的流行程度就可见一斑，不过如果你以前没有接触过 jQuery ,可能需要工0绞#& —场 
花些时间来习惯它的用法。下面来 f 解利用 jQuory 能做哪些事情，如果认为对 


你来说适用，建议再仔细地研究。 

对于初学者，还记得我们在这本朽中写的所有 window onload 函数吗？如下 


英的代紱。 


Mi ndov, onload = function CJ { 

alert ( M the page is loaded!; 


使用 jQuery 也是一样： 

$ (document).r^dy (^nctionO ( e f 样，丈 _ 备 _ 姑■个 
alert( ,T the page is loaded!"); 

})； 


或 者还可以进一步简 化为： 

$ (function 0 ( 

alert ( IT ^he page ±& 

H ； 



ioadedf ' 1 }； 


这很蛣，不过芍以希料，幵始时芍能 ST 0 戌 1 宪 
龙一段的两勿链幻悚这料用 :在。 不用托心 .吸雜 
狀含盔现 a 很 t 楛。 


那么从 DOM 得到元素呢？这正是 jQuery 的闪光之处，假设页面中有一 
个 i<3 为 “buytiow” 的铺，希望为这个元桌的点主事件指定-个点击处理 
程序（这本书屮巳经做过很多次了）。下面来看如何 做到； 


$ (function 




CifSi £® 摩？ 賞羌 si 主一个必盘，达含杏页®加载时作 fH 场 

用。 

___缒下来获蚁有一个 W 的堪 C ；£# 

f 逢用 CSS i ' i 送綠走華 ） a 


$ ( IT #buynovr N ) . click (function 0 


alert< M I want to buy now } l ^}7^ 


>> ； 


}) 


, 对结果 if 用 cUcfc 皋设 f 

oi^cUiteCt 理 <14。 
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这只是一个开始，还可以很容易地对页面上的每一个锚设置点击处理 程序: 

1 


$ [function 0 { 

$ ( ,T a T, ) unct ionO { 


/ 一- t 漱 i .) 达 一 .4 , 只 t 曩 f 走用杉 

it %. 




舞钐 i 



alert 「I want to buy now !’_ J ; 



如莱 T - £ jf 2 u.cvy , 代袋舦金麻蛾 

译多， 伐刁以沈 fe 看看。 


或者，还可以做更复杂的事情： 比如杳找-个 W 的; t 寿中 

J 的錡宪 < LL > 孑无.。 

$ (function 0 { 

})； ^^Playlist > .i^.^dClassC^avorite-^ 姻湖嫩 _ 和此 ' 

V ,丈好 I ：这 H 是一个 9 W^iA^tiAW 
得多的 ° 


jQuery 还有另外一个方面，可以对元素完成很多有趣的界面转换，如下: 


$ (function () { 

$ (^ttspecialoffer") .toggle(function() { 

$ {this) .animate ({ bacJcgxoundColor: T ， yellow T, >, 800); 

IffunctionQ { 

$ (this).animate({ backgroundColor: "white” }, 300); 

H ； “ 

y ik 达含 iHrf 巧外 eaLdU ^ r 的元舞存荈个 杖&之 间切旄 r 一个袅黄 

’ V t , noomt , 另一个 I 会运. ^ oo <$ f . t . 輯动函暴现 

个杖态匕问的 a :4。 


可以看到，利用 jQuery 可以做很多事情，我们甚至还没有谈到如何使用 jQuery 
与 Web 服务通佶，还有处理 jQuery 的所有 插件。 如果你惑兴趣，最好访问 
http ： // jquery , com /， 参考其中提供的教程和文档。 

[5 巧以看看 《Head First 」 CSutry 》 f 
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XHTML^SVG 

M XHTML 死？，还是 XH 1 M •永存 

这本 IS 对 XHTML 的讨论很粗略，开始时先做 f 一个 “XHTML 死了" 
的讨论，然后简单讨论 r "JSON 与 XML ' 亊实上，谈到 XHTML , 
只 ^ XHTML 2 及以后版本没有生命力，实陆上’如果你愿意，完全可 
以采用 XHTML 方式编写 HTML 5 # 为什么还希望这么做呢？嗯，你可 
能需要验证文档为 XML ， 或者要把文档转换为 XML ， 也可能希望结 
合 HTMLi 持一些 XML 技术，如 SVG (参见 #5) 6 

下面来看一个简单的 XHTML 文档，然后再强调一些重点（我们不可 
能全面介绍关于这个主题需要知道的所有方面，与 XML 类似，这个 
内容很快就会变得相当复 杂）。 



<rDOCTYPE html> ^- 

<html xmlns^ T ， http : //www.w 3 .org/ 1999 /xhtml ,T > / ^ tS-XML. # ■"个 命名空 

<heaLd> 


<title>You Rock! </tit1©> 


<mfita ch a r seUTF- 9 rl 
</head> 




辧苟允景 d 姨是农构货 K :+i 泰这 f 矗后 J 节/>乘 
鏈 i 这个空元素 D 


<body> 

<p>I' m kind a liking this XH™L!</p> 

Cavg xmlns= 1t http://www.tr3.org/2000/avg f, > 



<reet stroke= M black ，T fill= T ， b!ue ，T x= (t 45px ，T y="45px ,f 

width= lT 200px pt height^ 1 lOOpx 11 stroke - width= t, 2 ,T /> 


f 羡用 svq 存资 ii I ： 铨制一个矩 
荀兵 svq 的更多 内窖参 
考勢 5 (下一贸 ） a 


</svg> 

</body> 




对千你的 XHTML 页面还有几点需要 考虑: 
■ 页而必须是良构的 XML 。 


%, 无者 III 碣蟪嵌套，读如此类。 


■ 页面要以 application / xhtml+xml MIME 类型提供，为此需要 
确保服务器提供这种类型的仿面 （4 以研究有关的文档，或者咨 
询服务器管理员） 

擊 确保 < htralx _^_ 中包含 XHTML 命名空间（上面就做到了这一 
点） □ 

正如我们所说，关于 XML 有很多东西需要了解，另外有很多方面需要 
注意9 一如往常，对于 XMU 愿主賜予你力量…… 


536 附录 



其他 


*5 m 

除了闽布之外，还可以用另一种方法在 web 页面中自然地加人图形，这种方法 
就是可缩放矢 ft 阁形 (Scalable Vector Graphics) 或 SVG。SVG 已经 存在- 段 
时间了 （大约 1999年左右就有 了）， 现在所有主流浏览器的当前版本都提供 
支持，也包括 IE9 及以后版本。 


你知道的， 阃布 是一个元素，允许用 JavaScript 在页面的一个位图绘制表面绘 
制像尜， SVG 则与画布不同， SVG 图形要用 XML 指定 D “XML?” 你可能很 
诧异，没错，就是 XML! 你要创建表示图形的元素，然后可以采用复杂的方式 
把这些元素结合起来 T 构成图形场景。下面就来看一个非常简单的 SVG 例子： 

ilf 值用 XHTMU^ 式的 HTMLS". © 
f 為我们 I 噠用 svq. 2 5 f XMU 

<!DOCTYPE html> 

<html xml ns—"http: //www.w3 .org/1999/xhtml M > 

<head> 

<title >SVG</title> 

<meta /> 

</head> 存 HTML 中态孩 f 吏用一个 

<body> ^ t 





_ 我们的輩。它只.&含一个恩 ■ q 

vg xml ns 二 "http://www.w3.org/2000/avg"> 子 八：抑， ^=50 的 倍鼉 . 半径婷之 0 …… 

<circle id- M circle T, 


<div id^ ,r svg 
<sv 


</svg> 

</div> 

</body> 


cx= ,T 50 p< cy= ,T 50 M r* ir 20 T, 

stroke= ,T #373737" strake-width= ,T 2" ^ . 笔射钱宽与之嚷素宽 

fill^"#7d7d7d ，T /> 梂疤鈞深犮 "…- 

欠_……用中灰敁充 9 


SVG 定义了大量基本形状，如圆、 矩形、 多边形、线条等。如果你要绘制更复杂的 
形状，还可以用 SVG 指定路当然，那时情况会变得 E 复杂（由画布中的路径就 
可以看出）。不过，有些图形编辑器允仵你绘制一个场景，然后把它作为 SVG 导出， 
这样你就不用为自己确定所有这些路径而发愁了！ 


弒傳角«其他 尤景一 
i 蜂. 笱以从 DOM 获舣 
达个®:^蚩，4的它逨 
行公理…例如，芍 
以坩加个点4公理沒 
庳， 备用户私违 a 个思 
将®的 fUL 厲性板 


SVG 有什么好处？嗯， SVG 的一个好的方面是你可以随意地放大和缩小图形，它们 
不会像桌化，而缩放 jptg 或 png 图像时就存在像桌化的现象。这样一来， SVG 图像就 
能在不同情况下很容易地重用。另外，由于 SVG 用文本指定，所以可以搜索、索引 
和压缩 SVG 文件 T 还可以指定脚本 3 


我们只是粗略地介绍了使用 SVG 可以做什么，如果你对这个主题感兴趣，还可以进 
一步深人研究^ 
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离线 Web 应用 Web socket 


* 6 离线 Web 应用 

如果你有一个智能手机或者平板电脑，可能会在外出时访问 Web , 利用 
WiFi 和蜂窝网络，我们几乎无时无刻都能上网 * 不过，徜若确实不能上网 
该怎么办呢？你已经为自己构建了这些绝妙的 HTML 5 Web 应用，如果一直 
都能便用这些应用那该多好！ 

嗯，对日前来说，这是可以做到的。所有现代桌而和移动浏览器都支持离 
线 Web 应用（只有一个例外： IE> 。 

那么如何让你的 Web 应用离线也能使用呢？可以创建一个缓存清单文件 
(cache manifest file) ， 其中包含应用需要使用的所有文件的一个淸单，浏 
览器会下栽所有这些文件，如果你的设备离线 使用， 就会切换到使用这些 
本地文件。要告诉 Web 页面有这样一个湞单文件，只需要把这个缓存清单文 
件的文件名增加到 <html> 标记， 如下： 

<html manifest= u notetoself.manifast n > 

i ^ M&^Fnotetoself 

CACHE MANIFEST - ™ 5 个 S 存清 辈太件 必银以这 

CACHE: C ^ ^ ^ ° 

notetoself.html ) ^ — t t ^ t 

note toself .css 辨 ; httvil, JavaSof t y 

notetoself .j» 



利用类在用，没有连阔的 
的候也芍以锼用你喜欢的 web 
在用 f 


这里指出：访问指向这个文件的 Web 页面时，要下载 CACHE 节中 
所列的所有文件，还可以向这个文件增加另外网节； FALLBACK 和 
NETWORK, FALLBACK 指定试囝访问一个文件但该文件未缓存时要转而使用 
什么文件， NETWORK 指定不应缓存的文件（例如，访问踉踪资源 ） D 

在着手尝试之前,需要知道 两点： 首先，需要确保 Web 服务器得到适当地 
设置，能够为缓存清单文件正确地提供相应的 MIME 类型（类似十第8章 
对视频文件的处理）。例如，在一个 Apache 服务器上，要在顶级 Web 目录 
的 -htaccess 文件中增加下面这行 代码： 


AddType text/cache-manifest ^cianifest^ 

还有一点需要知道，测试离线 Web 应用相当困难！建议你査阅一本有关这个 
主题的好的参考书，另外还可以阅读 HTML 离线 Web 应用规范。 


实现了基本缓存之后，可以使用 javaScdpt 来得到缓存亊件的通知，如缓 
存淸单文件更新以及缓存状态等等。要得到芈件通知，需要为 window . 
applicationCache 对象增加事件处理程序，如下 所示； 

window, applicationCache, addEventLiatenet ("error ,T , errorH^ndler, 


/ 食现箝镁处瑾双存， 

fal ^ e ) ； 
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*7 Web Socket 

这本书中我们已经了解了两种通信方法 ： XMLHUpRequest 和 JSONP。 在 
这两种方法屮，都使用了 个 基于 HTTP 的清求/响应模型。也就是说，要 
使用浏览器做出请求来得到初始的 Web 页面， CSS 和 JavaSeripU 每次需要 
什么时，就会使用 XMLHttpRequest 或 JfSONP 做 出另个 请求，甚至在并不 
会向我们提供仟何新数据时也会发出清求，糖果机例子中有时就会出现这 
种情况。 




% 


其他 





m 




夸任顧承參 


Web Socket 是一个新增的 API, 允许与一个 Web 服务的连接保持打开，这 
样只要有新数据， Web 服务就可以把数据发送给你（而丑你的代码会得到 
通知）。可以把它想成是你与 Web 服务之间的一个接通的电话线。 

吋以从高层角度来了解如何使用 Web Socket： 首先 T 为了创建一个 Web 
Socket , 要使用 Web socket 构造函数： / 


{主瘅！1 个 
仪，系不！ http 仿 


var socket = new WebSocket ( M ws : / /yoiardccialn/yourservice M ); 


只要这个通过 opeii 事件打开，你就会得到通知，要为它指定一个处 
理程序： 



I 记淺，必须由你或贫他人写 
以 an 的 m 务器 f 


socket.onopen - function 0 ( 



alert ("Your socket is now open with the web service^); 


Cif 狨俱？一个公浮沒 
务 t socte 杜龙 含朽矸蚤 (I 


可以用 postMessage 方法向 Web 服务发送一个消息： 

socket .postMessage ("player moved right T, ) ; ^ 

为了接收消息，需要注册另一个处理程序，如下： 


iif 南压条器邕适一个？符漆，将来 
iS 芍以 &iM 二进制 f 不过二逬制 
这没 有得列广泛的 i^ Q 


socket.onmessag^ - function (event) { 

alert ("From socket: T, + event,data); 

)； 


^ ii 过 : if — 个让理锃 存， 我 fH 舍毬歧 ft 奄沒 
&. 消&包 t 筏搴件的如 ta 恿性中。 


当然，除此以外，还有另外一些内容需要了解，吋以参考一些在线教程， 
不过这个 API 井没有太多新内容 s 相对于其他一些 HTML5AP1 的开发，这 
个 API 有些滞后，所以在接手一个重要项目之前，先要査看最新的浏览器 
兼容性指南。 







更多画布 api 

# S 更多 © 布 API 

我们在第7章已经见 i 只过阃布，并用画布构建了我们的 TweetShirt 启动项不过 
除此以外，利用画布还可以做很多其他有趣的事情，我们希望在这里洱简单介绍 
几点。 









前面简要地提到过：可以保存和恢复画布上 F 文。为什么要这么做呢？假设你 
设贸广上1^文的一些属性 * 如 fillStyle , strokeStyle , lineWidth 等。然 


后你想临时改变这些值来完成某个工作，如绘制一个形状，但是做完这个工作 
之肟不想再逐个地把它们重置为原光的属性值。这种情况下就可以使用 save 和 

reSt0re 方法来做那 祕在 i 下念中以卜姐邮 

context.fillStyle = ， T lightbl'U© ,t ; ’ 為完威 - 咎邊利 s 


coniiext^ saveQ; 
context. fillStyle = 
context. fi.HRect(0, 
context,, restore (); 


■rgba(50, 50^ 50, .5) 


琛在係 Si ； 下亡。所荀 这整邐沒都金姿全他 
保存下来，规在笱以畋 t 4 性3…… 


0 , 100 , 100 ),- 



… …熱后 爲把 它们恢 m t 苗保存 的屬伐免 . 只索 
HU 用代访 ore 方法 t 现 旮辦节 屎性相含後 . I 蛑冻光 


如果你想平移或旋转画布來完成一些绘制，然后洱恢复到缺省位罝，这种情况 
下这些方法尤其有用 。 translate 和 rotate 方法有什么作用呢？下面就来看一 

看…… 



哀®中有一令 400 x 400 的基布 D 如 
w 果在 x，flirO 的位 i 给制一个黑 m 矩 
形，壬如你 斯輦的 ，它得飨制在左上儀。 


context. £i llRect{0 , 0, 100, 100) ; 



@現在，菘取瘙布， 傅它 fe 右， 尚 7分荆 
W 桴劫录 n 如寒在 x_0, 尸 0 再基另 一 


个 矩形， 达个矩 形含飨 制在前一令铕0尚右， 
命7200像录的位躉 P 达 mst 是对瘙布进行 


3平移, 


context .t ran si ate (200^ 200); 
context.fillRect(0, 0, 100, 100]; 
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u 



















cont^xt.translats(200, 200); 
context, rotate (dogre esToRadians {36)) 
context.fillRect(0, 0, 100 r 100); 


年移或连转函布的.它含存一个相的 
子 S 栳器 ® O 在上角定泛的方格中移 
刼。釦菜值角 CSS4 宠恿布的倍更 ’ 
電 J 考惠约这螫值 s 巧以试谈％ ! 


3^ 


现在把所有这些内容综合起来！ 可以结 合使用 translate 和 rot ate 方法来创建 
一些有意思的效果 „ 

var canvaa = document .getHlementById (^canvasv 1 ); 
var content — canvas. getContext^ "2d ,T ); 

var degrees =r 36; 31 侈存 1 上下 5 ^以 鯈旮工 宅威二后能琢 

y〆- “ 献以 it ㈣ 方格 治赛。 

context , save{} ; 

context.translate (200, 200J; ^ 将函本尋 ^$Q£>0, 2.00 a 
conteKt,fillStyle = M rgba(50, 50, 50, .5) M ; 

备汰搀坏时, 在。 讀 
Jk ^ 軔一个矩衫之前将圣 

for {var i = 0; i < 360/degrees; i++> { 4 謹择 36' 與銓制 l/> 

context,fillRect<0 r 0, 100, 100” 个矩形 。 

context, rotate (degr e e sToEadi an s (degrees)); 


context ■ restore Q; 


/ 规 ft * 们的產 4 波琢来 
L 的 0 E ! 


这些简单的变换可以与其他更强大（也更复杂> 的方法（如组合和变换） 
结合，用闰布可以创建丰富多彩的平面艺术，只有想不到，没有做不到。 


(ii 蕞最后利的 
结果， # 望伤喜欢 ! 


^ ^ ^ 







分、 look mjn I 

mp .^sQcaJhtriij^fl 




其他 


St 



( 3 ) 如 1 在餘 W 矩形前担转 》 卒嚯？ （ It 认掩） 

W »痒 会玦簷 它的左歧籽， 命 子我们 fW 
才讲在上 诔移动 Srj20 < UOO 的饺 i , 所 冰 瘙布会 
绕达个位 1 紙 聲 ㈣ 垂, 
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选择器 API 及衮他 

邛遴择器 API 為 

你已经知道如何使用 document : . getElementByld ; 从 DOM 选择元素，这本书中我 
们一直在用这种方法来结合 HTML 和 JavaScript 。 另外你还知道如何使用 docume n t . 
getElementsByTagName (这个方法会返回与一个标记匹配的所有元素的数组），甚至还 
有一个 getElementsByClassName 方法（可以想象 t 这会返回一个给定类的所有元索> & 


利用 HTML 5， 则有了一种从 DOM 选择元尜的新方法，这是受 jQuery 的启发。现在通过使用 
document ■叩 erySelector 方法，可以在 JavaScript 中使用 CSS 的选择器（不过 CSS 中使用 
选择器指定样式）来选择 DOM 中的元紊， 

假设有以 下这个 简单的 HTML: 


<!doctype html> 
<html lang= M ©n M > 
<head> 


<title>Query sel«c torsK/t itle> 
<meta charset^utf-B'^ 

</head> 

<body> 



巧飪砷究这个 HT MU 的蛣构 我们将 
{逢用 选释 UAP \ li 页而 H 择无青。 


<div cl a ^ s = M conte nt" > 

<P id= ,f avatar" clasa= ,, level5">Gorilla</p> 


<p id— ,T color ,T >^ujrp 1 ©</p> 
</div> 

</body> 


</html> 



节一个 < div > 大最 _ 类巧 " p 

另外 有兩个 <p> 元秦 r 分到有 tS 的 【 d , 
真中 一个尤 f 的类老 n Uv 佔' 


现在，使用选择器 API 清求 avatar" <p> 元素: 



document - querySelector{ H #avatar M ); 

这弓 document,getElementIcM”avatar"> 基本上是一样的。下面使用元素 


现僅僅用杉记名和失來选择运 个无棄 




fiiAf, fS 用一个孑选择器乘孑元景 
的<?>尤 橐， 软认他 . 它 ta 绛弟一个孑无秦。 


的类来选择这个 元素： 

document. querySelector ("p, level5 ,f ); 

还可以选择作 为<3:^>子 元素的 < p > 元桌，如下 ： 

doc ume nt. qua rySel ector {’_ div>p r, J; 

或者甚至可以这样 i 

document, queryS elac tor conte nt>p ,T ); 

如果实际上想得到 < div >| 的所有 < P > 元素，可以使用选择器 API 中的另一 
个方法 querySelectorAll : 广现奋 我们饵 ijj 

document .cjueryS«lec tor All ( 1, div>p' r ); <-^> 孑尤舞 .f 

类 fti 干 getElementsByTagNamet querySelectorAll 会返回——个元素数组 a 
仅此而已！这个 AH 中只包含这两个方法 a 尽管这个选择器 API 规模很小，不过选 
择元素的功能很强大。 
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其他 


MO 不过，还布艰 f 

嗯，我们真希望把没有谈到的内容限制为十项，不过看起来还有很多都 
没有提及，在读后面的索引之前，我们再用一页介绍更多内容。如下所 
列 （要 记住，这些领域还在不断发展，不过相信你希望先有所了解，以 
备以后参考） i 

索引 数椐库 API 和 Web SQL 

如果要在本地存储你的数据，而1想找一个比 Web 存储 API 更专业的方 
法，可以关注 Web 数据库领域 & 目前有两个方法最有竞 争力： Web SQL 
和 ImkxedDB^ 颇有讽刺意味的是，在这二者之中， Web SQL 得到了更 
广泛的支持 T 但是最近却被标准委员会废弃（这表示他们不再采纳它作 
为-个标准，你的下一个启动项目最好不要建立在 Web SQL 之上） e 另 
一 方面， IndexedDB 述没有广泛实现，但是得到了 Google 和 Firefox 的支 
持。 【ndexedDB 允许快速访问一个很大的索引数据集合，而 Web SQL 是 
一个小 SQL 引擎，在浏览器中运行 & 要时刻关注这些技术的动态，它们一 
直在快速变化！ 

im 

Web 开发人0 -直在用 jQuery 完成拖放,现在这个功能已经内置于 HTML5 中。利用 HTML5 拖 
放 API, 可以指定要拖动的元桌，把它投放在哪里，还可以指定 JavaScript 处理程序，从而可 
以得到拖放时各种啦件的通知。要让元素可拖放,只需把 drag gab leM 性设置为 true。 几乎 
所有元桌都可以拖动：包括图像、列表1段落等。可以监听类似 dragstardUdragenc^ 

事件来定制拖动行为，甚至可以改变一个元素的样式^使它在拖动时有你希望的外观《利用 
dataTmnsfer 属性可以随所拖动的元桌同时发送一些数据，也可以通过 eveiu 对象访问这个数据， 

来 f 解一些情况，比如元柰是否在移动或复制。可以看到，利用 HTML5 的拖放，现在我们有 
了很多绝好的机会來建立新的用户界面交互。 

跨丈档滴悤传逯 

在第6章中，我们使用了一种名为 JSONP 的通信模式，来避开 XMLHttpRequest 存在的跨域通信问 
题。还有一种方法可以在文档之间通信，甚至是不冋域中的文档。跨文档消息传递 API 指出，吋 
以使用一个 〖frame 元素向你加栽的一个文裆传送消息^这个文档甚至4以位子不同的域！目前还 
不会在你的彳 frame 中加载任何文档，你只是希望确保它来自你信任的一个域，并设置它接收你的 
消息。不过从未来的发展来看，这将成为一种在两个 HTML 文档之间来回接收消息的方法。 

还玎认继续…… 

关于 HTML5 有一点很棒，还有很多很多新的功能正在以飞快的速度发 M。 这一页原本还有很多东 
西要讲1不过实在没有篇幅了。所以请时刻关注 http://wickedlysmart .com，f 解 HTML5 的 

所有最新动态！ 



你现在的位置 ► 
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新构造的 HTML5 指南 






544 








HTML5 新构造指 i 

最近我们在 Web 镇为构建代码做了很多补充，而且为这些新构造准备了一个方便 
的指南 t 这可能是你一直想要的具体来说，我们增加了一组新的语义元素，能 
够让你在构建页面时如虎添翼。目前我们的指南并不完备，实际上，这里的目标 
只是为你（有经验的构建人员）提供足够的信息，使你能熟悉这些新的 HTML 5 元 
紊和 CSS 属性，这样等你做好准备，学习如何构建本书中的 Web 应用时就可以使 
用这些新特性了。所以，如果你需要一个关于 HTML 5 新增语义的快速教程，可以 
拿一份指南，这是完全免费的 （不 过时间有限，机不可失）。 



其他 
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Web ® HTlVlt 5 语义元素指南 




_ ■ _ ■ _ 、 ■ _ _ ■ ^ _ I ' ■ It ■ ■■■_■■■ - - ' - ■ _ ■ — ■助 ■ . ■_ ,1 ^1 — —— ■ ■ ■ ■ 

最丟 Web ^_ 建代码做示芫 还翁審 亍个 krtSW 南挺 
¥如果你 一 1在用 < diV > 莱表 京常见的豳造 V 也贡运:： 寻航二 -页脚和博客文章 r M 3 - 
: :_为你提供 Ty _ 祕构建所杜，定每些新内赛 □ 〜 

•"- _■ — •__ ■— ~~ ■■• ■ 一 i-. - : -.— 一 -S ^ _ —• ——— .一 ■ 


d ■ ■ ■ — — - —«■ ■ mm 

^ 7 < abcstion > 7 yP .::.: 齐乂 : - ： . : 1--;^- v :.:.7.. 

- ■_ _■ _ • _ ■ . __ ■_■ ■ .一 

- _ 3 ecti 灯 n >^ 严个 ^ 通用客档 1 ^可以 使 Tffi < seetion > 将文 

档 1 :比如说; 二 个指‘厂弩记丸 HTML * 或者还可 lit 包 ffl 

"BTML/<sectk^> 并不是个通用容器 t 那是 <div> 的 :^ 作 , 

: .. S 外要记住,. 兄 有对元.素分组来指定样式 W 才使用 < d 〖 v >。 -， 




< article > 


cartic 砂是一个自包含的 US 容块，你苛能希望与另一个贡面 
%网站纟甚至是你的狗狗）共享这个内容块。这个元 素韭棠 
适用于博客文章和新闻 t 


< header > 


< heatier > 放在 < section >*< artide > 之类元素的最前面 i 还可 
以在体的最前面使用 < head ^ r > S _ 页面创建主显眉。 


<footer> 


〈 footer ) 放在其他元裝的最下面 & 比如 < section> v < article > 
和<6々>。你可能以为一个页面上只能 有一么 < footer > T 实际 
上不然，只要页 面中藥 一节需要有脚注内容 =( 如一篇文章的 
作者介绍或参考文献），都可以使用这个元素。 


<hgroup> - .- - 一 . 

这个元素可能有点难理解 a 不同于 -< header 、 它可以包含与 
首部相关的任何元素 、 < hgroup > 专用干0组 < heade 『> 中时标 
题 (< h 1>.，,< h 6>)« 这对于建立大纲很有帮助。 


■ I 卞__ ■二.■入二 

. = — ~1 . ^ - 
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Web 镇 HTML5 语义元素指南 


ISIS 


IS 

• ' 




ELjii 


<nav> 


<nav> 当然用于导航和链接 fl 不过不只是单个链接，如果你 
有一组链接，也可以使用 <nav >， 比如网站的导杭或者傅客 
链接。不要用于段落中的链接。 


<aside> 

< 35 ^ 8 > 很适合页面主结构之外的大块内容，比如旁注1引述 
或后来添加的内容 6 


<time> 

终于到时间了！可以用 <time> 标记你的时间 B 懷慢来，要正 
确使用这个元素需要花些时间，你要好好研究一下 <time>& 
合法格式。 




<progress> 

快完成了？没错，这些 HTML 5 元素就快要介绍完了 
<progress> 表示完成一个任务的进度如何。使用这个元素， 
再加上一点 CSS 和 JavaScriPU 可以得到一鉴很不错的效果。 






■ 1L : J : : i 臞 


<abbr> 

嘿，拜托，如果单词很长就要使用缩写！这个元素很适合捜 
索，因为搜索引擎并不总是那么聪明，能够像我们一样知道 
这是缩写。 


<mark> 

可以使用 < 03『 * 0标记单词，比如，用来突出显示或者完成编 
辑。这个元素很适用于搜索引擎结果。 
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css3 藤性 


阁 CSS 多为新构造增加桴式 


令、 






- ；■/ 


Web 镇 CSS 3 属性指南 


r 


# 


fir au 


既然已经准备好了构建模块，现在来考虑一些内部设计。你可能希望所有构造看上去都很美 
观，是不是？ 

新厲性 

CSS 3 中有很多新属性，其中很多属性所做的工作正是 Web 页面创作人员多年 
来一直苦心积虑通过 HTML , 图像和」 avaScHpt 才能办到的。 例如： 




opacity: 0 . 5 ; 
border-radius: 6 px; 


让一个元旁丰澧的。 

_ 在莕个 角上用—个印八的曲 

度釗連一个®^鼓粟。 


+惠， 權糊扈 巧: LCfx 
不 H 颇深.度的明 


box-shadow: 5 px Spx lOpx # 373737； 

新布局 

有几种强大的新方法可以用 css 建立页面布局，这些方法远胜于定位，而且 
使用时要容易得多。例如； 



display: table; 
display: table-cell. 

display: flexbox; 
flex-order: 1 ; 


拓乇 f HTMU 皋格:> 

句吞费猓放方趕，如 < dLv > 


新动画 

利用动画，可以在厲性值之间实现动画。例如 T 可以让某个元素消失 
明度从不透明逐渐变为全透明： 


将透 



个薄#龙來变 <^s 
雅定; T 廣作邛郎 ㈣ ） ， 
漸変鰣乘的旖1以 
苁忪站基数， W 以变 


traneiltion: opacity 0 . 5 s ease-in-out; 
opaLcJL * ty * 0 ; tS ^opfloLty 5 4 (比伽 

h / 说旮一 个 hover 專 4 i ) , U 
新. ： ^择器 切違 一个■肩失 / 重现 M 。 

还有整个一组新选择器，包括 nth ^ hild ， 这允许指定一个元素中的特定子元 
素 g 最后，还可以设黃一个列表中交替行的背景色，而且一点都不麻烦。 


ul li:nth-ohild( 2 n) { color: gray; 


a 表孕 m 选择基一个问裸的的表 
场， 轉 议悉竹睪疤蜉矣毯。 


n ,^ ; 1 r,r 
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符吾 


A 


+ 

+ 


S (dollar sign) ($ ( 美元符 ）} 

$( ) (JQuery furiL-tion) ($( )(jQuery 螭数 ））534 
beginning JavaScript variable names ( 怍为 JavaScript 变量 
名的 开尖） 40,42 

2D drawing context (2D 绘制上下文 ) ,canvas ( 画布 ) 292. 
-参见 Canvas API; conlexl, canvas 
defined ( 定 义 ） 293 
getting ( 获取 ）302 

,(comma) {, () ) , separating object properties (分隔对 
象厲性 ）132 

{ } (curly braces) {{} ( 大括号 ）） 

enclosing code blocks ( 包闱代码块 ）26 
enclosing object propenies ( 包围时象 . 厲性 ）132 

■ (dot) operator {, ( 点 ) 操作符） 

accessing object properties ( 访 R 对象 厲性） H3 T 134 
invoking methods ( 网 ffl 方法 } 151 

// (forward slashes) (// (前 向斜线 ） ） ,beginning comments m 
JavaScript ( 开始 JavaScript 中的语句 ) 39 

+ (plus sign) (+ ( 加号 ）） 

addition openitor (加法操作符） or string concatenation 
operator ( 或字符串连接操作符 ）45 
string concatenation operator (卞符中连接操作符） 26 

“ M (quotation mark^, double) ( " ( 引号，双引号 ）） 

around JavaScript property values (JavaScript 厲性值两 
边） 133,308 

uround codecs parameter of <source〉element {<sourcc>^n 
泰 codecs 審数两边 ） 359 
denoting empty strings ( 指示空串） 26, 95, 108 
su (round ing character stri ngs in J ava Script (J av a Sc r i pt _ | ■包 
围字 符串） 39 

;(semicolon)(; ( 分号 } ) s ending statements in 
JavaScript (JavaScript 屮结東语句） 39 

I ] (square brackets)([] ( 中括号 ）） 

accessing and enumerating object properties (访问和列举 
对象域性） 133, 160 
associative arrays ( 关联数组 ）424 
creating and indexing arrays ( 创建和索引数组 ）67 
using with local Storage (Itl TiocalStoragc) 424 

_ (underscore) (_ (下划线 ）） t beginning JavaScript variable 

names ( 作为 JavaScript 企里巧的开头） 40, 42 


A AC Audio 357 

<ahbr> (abbreviation) element (<abbr> ( 缩与）元素 ） 547 
accuracy ( 精度） T location information ( 位置倍总） 19t 
cnableHighAccuracy option (enableHighAccuracy 选项） 
198 

accuracy property (accuracy 属性 ） ,coordinates 
object (coordinates 对象 ） 190 

addEven(Listener method 367 

calling error handler ( 调用错误处理程 406 
listener for ended video event ( 结来视频事件监听器） 

386 

popping up play button after video ends (视频结束后显示 
播放按 tfO 386 

addition operator (+) (加法 操作符 （+)> 45 

addMarker function (example) (addMadcer 函数（示例 ）） 

]«& 

addStickyToDOM function (exainple) UddStickyToDOM 函数 
(示例 } ) 430,. 432,440 

passing key as well as value each time it's called (每次调用 
时传递值以及值 ）450 

using sticky object instead of string ( 使用 sticky 对象而不 
是字符串 ）455 

Adobe Premiere elements ( Adobe Premiere 元素） 360 

Adobe's HTTP Dynamic Streaming (Adobe 的 HTTP Dynamic 
Streaming) 404 

altilude and ahitudeAccuracy properties (aitUude 和 altitudeAo 
curacy 属性 ） ,coordinates object (coordinates 对象 } 
190 t 197 

angles ( 角 ) 

measured in degrees < 用 ® 度 D , converting to radians 

(转换为弧度 ）317 

startAngJe and end Angle parameters of arc method (arc 方 
法的 startAngle 和 endAngle 参数 )' 315 

animations (动 _) , new ( 新增 ）, in CSS3 (CSS3 中 ） 548 
anonymous functions ( 蓝名函数 ）128 
using ( 使用 ）129 
Apache 

telling to serve video files with certain file extensions (通 
知提供冇某些文件扩 M 名的文件 ）371 


这是索引 


549 


索引 


using on Mac, PC T and Linux (Mac. PC 和 Linux 上使用） 
231 

APIs (Application Programming Interfaces) (API (应用编程接 
U) ) 15 s 31 

appendChild method (appendChUd 方法） 
cLemcnt object (element 对象 ） 158 
in addStickyToDOM function (example) (addSlickyTo- 
DOM 函数（示 例） 中 ）450 
ul object method (ul 对象方法} 101 

Apple's HTTP Live Streaming (Apple 的 HTTP Live Stream¬ 
ing) 404 

appIicaiion/xhim 1+xmi MIME type (application^ 
xhunl+xmlMIME 类型 ） 536 

etre method (arc 方法） ,canvas context (ill 布上 F 文） 313. 
direction, startAngle, and end Angle parameters (direction^ 
s tartAngk 和 end Ang le 参数 ） 315 
drawing circles for t-shirt design app ( 为丁恤设计应用画 
阏 ）319 

interpreting call to ( 解释调用）， and sketching out all pa¬ 
rameters on circle ( 在画上画出所有参数） 317, 343 
using to trace a given path (用来路 l 踪给定路径) 316 
y, and radius parameters (x, y 和 ius 参数 ） 314 

arguments (实泰）， function (函数 ) 120 
objects iis (对象作为 ） 136 
passing Uj parameters (传人行参） 122, 162 

arrays (数组） 67 

adding items (增加数组项 ）68 

creating and assigning to a variable (创违來 M： 和喊值) 

67 ^ 

filimg Ibt llcins from (example) (从中填充列表项（示 

例 ）） 的 

getting value of items in (获取数组项的值） 68,303 
length of (长度） 68 

localStorage object as associative array (lotalStorage^j'^ 
怍为关联数组 ） 42 4 
of objects ( 对象）134, 457 
removing items front (删除数组项） 73,448 
solving problems in Iocal storage (解 决本地存储中的问 
l M) 439 

storing in local storage (存储在本地存储中）440, 467 
using to store multiple values (用來存储多个值）75 
video playlist (视频播放列表 } 363 

of workers (工作线程 ） 508 
<arti cle> ele me nt (-carticl 0元素） 546 
<aside> ekmcm (<ahde> 元素 ） 547 
associative arrays 〈关 联数组 ） 424 

attributes (属性 ) ,gettin and settingg (获取和设置 ) 158 


setting attribute on element (设宽元素域性） 379 
setting id attribute of sticky note ( 设置即时贴的 ki 属性） 

450 撕 J 

audio ( 音 频） 16,533 T 

A AC and Vorbis encodings < AAC 和 Vorbis 编码） 357 
codecs 358 

encodings in video files (视频文件中的編码 ）356 
Formats (格式)，357 1 533 

tneibods and pro pert ies of audio API (音频 API 的方法和属 
性 ）333 

<atidio> element (<audio> 元素 ） 533 

a u top lay attribute (autoplay 域性） t <video> element (<video> 
元桌） 353,354 



background color ( 背景色） 

canvas ( 画布 ）， filling before drawing new squares (绘制 
新方块前填充） 306,342 

netting backgroundColor property for sticky note (设置 B|J 
时帖的 backgrou ndColo r 域性 } 455 

setting for alternating rows in a list (为 列表中的交替行设 
置 ）548 

background tasks (后台任务 > 95 

begin Path method (begi nPath 方法） T canvas context (画 布上 
下文） 31K319 

^bitmap" drawing ( “位 ST 绘制 ） , on canvas ( 幽布上） 
336 

black and white (黑白 > ,converting pixels to ( 像索转 换为 ) 
399 

<body> elemciU& (<body> 元素 ) ,adding <script> elements 
( 增加 <st ： Tipt> 元 : 素） U) 53 

booleans ( 布尔 ） 40 

boolean expressions ( 布尔 . 表达式 ）43 

conditional tests in for and while statements (for 和 
while 语句中的条件测试） 47,49 
using to make decisions with JavaScript (用来用 
JavaScript 做决策 ） 49 
true and fahe values (true 和 false 值 ）39 

border- radius property (border-radius 属性） 548 
box-shiidow property (box-shadow 属性） 54g 
<br> element (<br>) 26 

browsers (浏览器） 

audio encodings support ( 音频编码支持 ） 533 
background tasks ( 后台任务 ）95 

caching and repeated JSONP requests ( 缓存和贡复 JSONP 
请求） 272,277 
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co rnroh tor HTML v ideo (HTML 视频控件） 355 
creating workers ( 创建工作线程 ） 478 
cross-browser compatibility of HTML pages (HTML 寅面 
的跨浏览器兼容性 ）20 

detecting geoiocation support ( 检 测地 理定位支持 )174 
detecting support for canvas (检测 igj 布支持 ） t in cade 
(代码中 > 293 

detecting support ( 检测支持 ） ,using Modemizr library 
(使用 Modern iz.r 库 > 53 2 

developer tools to manage local storage ( 开发工具来管理 
本地存储 ） 434 

exceeding local storage capacity (超出本地存储容摄） 

458 

executing code only after page is fully loaded (只在页面完 
全加载后执行代码 ）64 

fallbacks for supported video ( 支 持的视频的 “ 退路"） 
362 

fitting canvas to window in Fractal Viewer (example) 

(Fractal Viewer 中画 布占满窗口（示例 > ) 5]7 

history of browser storage ( 浏览器存储的历史） 414-416 
loading and displaying HTML document <加栽和显示 
HTML 文档 ) 14 

local storage capacity ( 本地存储空 S) 420 
local Storage not working when loading from file (从文件 
加载时本地存储不能正常 I 作 ）422 
methods of determining location ( 确定位置的方法 ）170 
mobile devices ( 移动设备 ) t canvas support ( 画布支持 ) 
335 

not supporting <canvas> ( 不支持 <canvas>) t dispIaying 
text contained in it ( 显示其中包含的文本 ) 295 
not supporting HTML5 features ( 不支持 HTML5 恃性）， 
providing alternative for (提 供候选方法） 19 
parsing HTML and building DOM from it (解析 HTML, 
并由它构建 DOM) 57, Kl 

runnmg code stored in local storage (运 行存储在本地存储 
中的代码） 104 

same origin policy on video ( 视频的间源 策略 ）408 
security policy ( 安全 策略 ）244 

storing data using localStorage (使用 localStorage 存储数 
据 ）108 

support for HTML5 ( 对 HTML5 的支持 ） 17 
support for offline web apps ( 对离线 Web 应用的支持） 

53 S 

support for Web Workers ( 对 Web 工作线程的支持 ） 482 
support for XM LHttpReq ue s t (对 XM LHttpReq ues t 的支 
抟 ） ，onload pTopcrty (onload 属性 ） 239 
testing for support of video formats for video loaded by 
code (测试对由代码加载的视频的视频格式的支 
持 ） 368 


video encodings supported ( 所支抟的视频编码 ） 358 
video file formats (视频文件格式） 352 
video support ( 视颊玄持） , deiermining level of (确定等 
级） 361,411 

Web Storage support (Web Storage 支持 ） 422 
buttons ( 按钮） 

button object (but ton 对象 ）, oncHck property (onclickM 
tt：) L54 

clearing local storage ( 清空本地存储 ）435 
click handlers for video booth ( 摄像间的点击处理程序）， 
JavaScript code (JavaScript 代码） 377-379 
con trolling effects in video booth ( 控制搂像间的效果 } 
390,391 

CSS styling for video booth (摄像间的 CSS 样式〉 381 
handling click event ( 处理点击亊件 ) 89,92, 102, 108 
HTML For video booth burtons (摄像间按钮的 HTML) 

375 

implementing for video booth ( 摄 像间的实现） 384-386 
JavaScript factory code for video booth (摄 像间的 
JavaScript 工厂代码 ） 376 

preview button for t-shirt design application (T 恤设计应用 

的预览按钮 ) > 302 

se lecti ng bet ween test v ideos ( 测试视频间选择） 387 
sticky note appJication < _ 时 H 占应用 ） 431 
create Sticky handler (createStkky 处理程序 ） 432 
toggle or radio buttons ( 开关或单选按钮） 380 
watching posilion and clearing the watch (监视位及 和済除 
监视） 193 

bwcartoon video filter (bwcartoon 视频晚波器 > 400 T 410 



cache ( 缓存） , browser (浏览器 > 272 T 277 

cache manifest file for offline web apps (为离线 web 应用缓存 
淸单文件 ）53 S 
callbacks ( 回调） 254,277 

getting tweets sent from Twitter (获取从 Twitter 发送的微 
博 ） 322 

camel case in multj-word variable names ( 多词变置名的 camel 
case) 42 

canPla>Type method (canPlayl^pe 方法 } , video object {video 
对象） 368-374 

w maybe” response ( H maybe H 响应）， but playback 
fails (但 播放 央败） 37 】 

using to determine video format for your browser (用来确 
定浏览器的视频格式 ）369 
Canvas API ( 画布 API) 16,281 -34B, 540 

adding <canvas> element to web page < 向叫 61 )页面加 <can- 
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vas> 元素 ） 286 

background color of canvas ( 画布的背景色 ） s filling before 
drawing new squares ( 画新方块前填充 } 306 

BE the Browser exercise ( 扮演浏览器练习） 

interpncting call to arc method ( 解释 arc 方法调用） 317, 
343 

browsers not having support for canvas (不提供画布支持的浏 
览器 ） 2 奶 

call to fi 1 IBackgroundColor function (fUlBackgroundColor 函数 
调用 > 307 

<canvas> element vs. SVG graphics (<canvas> 元素与 SVG 趣 
形 ）537 

click handler for canvas in. Fractal Viewer (example) ( Fractal 
Viewer ( 示例）中画布的点击处理程序 ）515 

Code Magnets exercise ( 代码磁貼练习） 327 1 345 
Crossword Puzzle ( 填宇游戏） 340, 346 
drawlmage method (drawlmage 方法 ） 333 
drawing a smiley face ( 画笑脸 ) 321.344 
drawing on 〖 he canvas ( 在睡布上绘制） 290-294 
circles (M) 309-317 

random cirdes for t-shirt design app (T 恤设计应用的随机 , 

m) sis 

using paths to draw shapes with lines (使用路径用线绘制 
形状 ）311 

writing draw Square function to draw squares (编写 
drawSquare 涵数 IM 方块 } 304 

drawing text ( 绘制文本） 325-332, 345 

exercise ( 练习 ）， drawBird function (draw Bird 函数 > 334 ， 

346 

exercise ( 练习 ） ,using path to draw lines and fill shape with 
color ( 使用路径画线并用 M 色填充形状） 312, 343 

fillStyle property of canvas context { 画布上下文的 fiHStyle 厲 
性 ）308 

fitting canvas to browser window in Fractal Viewer (example) 
(Fractal Viewer ( 示例）中画布占满浏览器窗口） 

517 

form for t-shir£ app]ication interface ( 衷单 ■ 实现 T 恤应用界面） 
298 

implemencing a scratch buffer { 实现 scratch 缓冲区） 395 〜 39S 

making canvas visible ， adding border using 

CSS 《使用 CSS 增加边框 ）288 

No Dumb Questions ( 没有傻问 _) 289, 293, 308, 335 

Pseu do-Code Mag nets ex ercise ( 蚀代 码磁 ! ( 占练习） 303, 342 

reviewing t-shirt design application implementation (H 顾 T 恤 
设计应用实现 ）296 

saving and restoring canvas context ( 保存和恢复画布上下文） 


540 

anti separation of presentation and content ( 表现和内容分戚 ） 
326 

Sharpen Your Pencil exercise ( 动动笔练 习 > 

dkplayiBg otil y new squares in preview (预览 中只显 示新 
方块） 306 1 342 

drawText function (drawTextS 数） 330 

summary of important points ( 要点总结） 338 

text methods and properties ( 文本方法和 M 性） 32S 

translating or rotating canviis ( 转换或旋转同布 ） 540 

t-shirt design web application {T 恤设计 Web 应用） 2S2 

using as display surface for video ( 用作视频的显示表面 ）408 

using <canvas> dement for Fractal Viewer (example) (Fractal 
Viewer (示例） 中使用 <caivvas> 元素） 503, 514 

video proce^ing with { 视频处理） 392-394 

<canvas> element ( <canvas> 元素） 

adding border using CSS ( 使用 CSS 增加边框 ） 288 
adding to web page ( 增加到 Web 页面 } 286 

cubicle conversation 拉 bcnit the <canvas> element (关干 
<canvas> 元素的交流 ）285 

partnership with <video> element (-^j < >^ 此 0 ：>元素的伙伴 
关系） 339,388 

case sensitivity in JavaScript .(JavaScript 中 区分大 小写） 41 
cell phone trianguLation ( 峰 : 究电 话三角 定位 ）169 
chaining ( 弟链） 

objects and properties (对象和 属性） , movie example ( 

影示例） 

objects ( 对象 ), properties ( 属性 ), and method (方 
法）， geolocation ( 地理 定位 ）17 fi 

character encoding ( 宇符编码）， UTF-8 9 

character strings ( 字 符串 ) , quoting in JavaScript (JavaScript 
中加 引号 〉 39 

childElementCount property (childElementCount 属性） ,ele¬ 
ment object (ekment 对象） 158 

child elements £ 子 元素） 

adding to parent element in the DOM (DOM 中增加到父元 
素 ） ms 

in DOM tret structure (DOM 树结构） 】00 
nth-child selector (nthrchild 选择器） 548 
replaceChild method (replaced!ild 方法） _ 270 

Chrome 20 .参见 browsers 

HTML5 support {HTML5 支持 ） 18 
Ogg/Theora video (Ogg/Theora 视频） 357 
security restrictions on vidco+canvas operations ( 视频 + 画 
布操作的限制 ）371 

security restrictions, on Web Workers (Web 工怍线程的安全 
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限制 ） 482 

■webm video fil es ( 「 we bm 视顿文件） 352 
WebM/VP8 video (WebM/VP8 视颊） 357 

cinema application (example) ( 影院应用（示例 ）） 138 
adding behavior to Movie object with a method (用方法向 
Movie 对象增加行为） 143-145 
creating movie objects (创建 movie 对象） 139 
implementing getNextShowing function ( 实现 getNexl- 
Shnwing 函数） 140 

Movie constructor function (Movie 构造函数）】 50, 152 
using Movie constructor to create Movie objects (使用 
Movie 构迫函数创建 Movie 对象） 153 
using this keyword to reference Movie object (使用 this 关 
键字引用 Movie 对象 } 145 

circles ( 圆） ,drawing on am\as ( 画布上绘制） 309-317,338 
arc method (arc 方法） 314 

converting angle measurement in degrees to radians ( 度转 
换为弧度 ）317 

creating paths ( 创建路径） 311-313 

class attribute (class 谋性 } t <anchoi> element (<anchor>X 
素 ）379 

class (类) > selectingelemeni by (选择 元素) 542 

clearlruerval method (dearlnterva 】 方法 } 271 

dear method (dear 方法） ,IcrcaLStorage object (localStorage 
对象 ）435 

clearStorage function (e\ampk) (dearStorage 函数 （ 示例 ）） 

435 

cl earWatch me thod (ck 舡 Watch 方法） 190 

click events ( 点击審件） 

adding handler in canvas applicmion ( 画布应用中增加处 
理程序 > 302.347 

adding handler in geo location application (地理定位应用 
中增加处理程序） 194 

adding handlers for sticky notes application (为即时姑应用 
增加处理程序） 43K 435,450 
as si gning h andler to elemc nt us ing JQuery (ff Query 
元素指定处理程序 ）534 

handler alerting user of button clicks ( 处理程序提 Si 用户 
点 击了按钮 ）92 

handlers for video application ( 视频应用的处理程序） 

376 

handling for Add Song button (Add Song 按钮的处理 ）&9 
handling for buttons ( 按钮的处押 _) 108 

close() method (ck>se() 方法） ,worker object (worker 对象） 
522,524 

closePath method (closePath 方法） ， canvas contest (画布上 
下文 ） m 


codecs 

AAC audio <AAC 音频） 357 

codecs parameter of <source> element's type 

attribute {<sod rce> 元素 type 厲性的 codecs# 数） 

359 

defined ( 定义 ）358 
H.264 video (H.264 视频 ） 357 
mam types of ( 主要类型 ） 356 
Theora video ( 视频 ） 357 
Vorbis audio ( 昔频 ） 357 
VPS video ( 视频 ） 357 
code reuse (代码重用） 

functions and ( 函数 ) 119 
melhods and ( 方法） 146 
colors ( 颜 色） 

choosing for sticky rtoles (为即时贴选 择 ）， h stickles ap¬ 
plication ( 即时酤应用中） 453-456 
f i 11 Bac kgroundCo I or function for canvas context ( 画布上下 
文的 fi I 】 Background Color 函数） 307 
fillRect method (fiMRect 方法） vs，fillStylc 

property (fiMStyle 厲忡） ， canvas context (画布上下 
文 ） 308 

setting background color of alternating rows in lists (为列 
表中交替行设 M 背景色 ） 548 
setting tor fill Style property of canvas context (设说画布上 
下文的 flllSiyle 属性） 304,308 
specifying in canvas ( 画布中指定 ） 338 

comma ( t ) ( 通号 ,separating object properties (分 隔对 
象厲性 ）132 

comments in JavaScript (JavaScript 中的 注释） 39 

computeDistance function (example) (txmiputeDistance 函数 
(承例 > > 180 

concatenating strings ( 连接字符串 ） i 参见 + (phis sign), under 
Symbols 

creating marketing slogans (example ) (创达推 广口号 （示 
例 ）） 72 

conditi onals (条 件） 37 

testing in while and for loops <whiie 和 for 循环中测试） 

47 

whlJe ioops (while 循环） 46 
constructors ( 构造函数） 146,160 
built-in ( 内置 ) 151 
creating (创建） J47 

LatLong constructor from Google Maps (Google Maps&^J 
LatLong 构造函数） 183 

Map constructor from Google Maps (Google Maps 的 Map 
构造函数） 184 

Movie con siru ctor fu nction (Mo vie 构迪函数） 150, 152 
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using ( 使用） 148 

using Movie constructor to create Movie objects ( 使.用 
Movie 构造函数创建 Movie 对象） 153 
WebSocket 539 

containers (容器 ） 356 
defined ( 定义） 35R 

MIME type for <sourcc> type attribute (<source> typeJS 性 
的 M3ME 类型） 359 
MP4 container (MP4 容器） 357 
Ogg container (Ogg 容器） 357 

in src attribute of <source> element (<soilrce> 元素 src 厲性 
中 ） 359 

WebM container (WcbM 容器 ） 357 ^ 

Content Delivery Network (CDN) companies (内容分发网络 
(CDN) 公司） 》 encoding services (编码服务 j 360 

context (上 下文） T canvas (画布） 292. 293 _ 5(M -参见 Can- 
vas API 

arc method < arc 方法 ） 313 — 317 
beginPath method (beginPalh 方法） 3U t 312 
close Path method (c losePath 方法） 312 
drawImage method (drawlmage 方法 ） 333 
fillRect method (fillReet 方法） 292, 304 
fiUStylc property (fillStyle 厲性） 330, 331 
fillTcxt method (fil]Text 方法） 328, 329, 330, 331 
font property (font 厲性 ） 329, 330, 331 
getting (获取 > 3 02 

HncTo method (UneTo 方法） 31 〖，312, 329 
moveTo method (moveTb 方法 > 311 g 312 s 329 

saving and restoring (保存和恢复 ） 540 
stroke method (stroke 方法 ） 329 
strokeText method (strokeText 方法） 328 
text Align property (textAlign 属性） 328, 330, 33 ] 
textBaseline property (textBaseline 厲性 ) 329 
translate and rotate methods (转换和旋转方法 ） 540 

controls attribute (controls. 属性 ) ,<video> dement (<video> 
元素 1 354 

cookies 414^416 

factors that make them proble mat i e (有问题的方面 ） 416 
Fireside Chat <_炉 夜话） ,Cookie and Local 
Storage (Coolde 和本 地存储 ）4 26 

coordinates {坐标) 

computing distance between { 计算之间电离 ） 180 
latitude and longitude (绎度和经度 ） 167 
coordinates object (coordinates 对象） 175,207 

altitude and altitude Accuracy properties (altitude 和 a I ti. 
tudeAccurac y 厲性） 197 

latitude and longitude properties (latitude 和 longitude 域 
性） 173,175 


properties (厲性 )i 190 

coords object (coords 对象 ） ，latitude and langhude 
properties (latitude 和 kingitude 展性 ） 173 

coords property (coords 属性 ） t position object (position 对 
象 ）190 

createEIcment method (CfemeElemcm 方法 ) ,document 
object (documem 对象） 99, 157 T 335,450 

crcateSticky function (example) (createSticky 函数 （示例 ）） 

432 

converting to use an array (转换为使用数组 > 44 J 

rewriting to store color with sticky note text (重写为随即 
时貼文本还要存储颜色 ）454 
stickles application (即时貼应用 ) t final version (最终版 
本 ）444 

creatcTask futrciion (example) (createTask 函数 （示例 > > 

512 

cross-document messaging ( 跨文档传递消息）543 

cross-domain issues with XMLHltpRequest < 使用 XMLHltpRe- 
quest 的跨域问题） 243-252 

CSS 31 

declared standard for styling ( 指定样式的卢明标准）5 
pos itioning v tdeo and can varies ( 视频和画布定位） 395 
property values ( 域性值 ) 308 
selectors ( 选择器 ） 5 4 2 

styling <canvas> element (<eanvas> 元素样 式 ）,adding 
border (增加边框 ） 288 
styling for video booth (摄像 ■间样式 ） 381 
using to set widih and height attributes of <canvas> (用来 
设 M<canvas>^J width 和 height. 厲性） 289 
using to style sticky notes ( 用来指定即时貼样式） 429 
CSS 3 l6 T 28 t 548 

page styling 〈页 面样式） 14 
curly braces ({ }) < 大括号 ({ })) 

enclosing code blocks (包围代码块） 26 
enclosing object properties ( 包围对象 厲性） 132 
currcniTimc property (currentTime 属性 ) t audio object (audio 
对象） 533 



data property (data 属性 ） »evenl object (event 对象） 485* 
524 

dat aTransfer property (dataTransfcr 属性 ■). , event object 
(event 命 象 ） 543 

datatypes ( 数据类型） 

conversions in JavaScript (JavaScript 中转换） 41， 45 
dynamic typing in JavaScript (JavaScript 中动态类型 ） 39 
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primitive types (基本类型） 40 

variables in JavaScript (JavaScript 中的变 量 ). »no strict 
types (没有严格的类塱） 38 
Date object (Date 对象) + getTime method <getTime 方法) 
140,272,442 

defining functions (定义威数） s with parameters '(参 数 ） 120 
degradation (降 级） t graceful (妥赛） tQ 
degrees (度) 

angles measured in (用度度 1： 角 ） 316 

converting to radiatliS (转换光弧度 ） 317 
latitude and longitude in (讳 度和 经度) T converting to 
decimal values (转换为小数值 ） 167 
degreesToRadians function (dcgreesToRadimis 成数） 3 80. 
317,3m, 344 

deleteSticky function (example) (deleteSficky 頃数（示例 ）} 

449 

event object passed to (传人的 event 对象） ,target informa¬ 
tion (目标恼息 > 451 

dealing object properties (删除对象厲性 ） 135 

developer tools buiU into browsers < 浏览 器内说 的开发工具} 
434 

direction pariimeter (direciicm# 数） , arc method (ate 力法） 

315 

displayLocation handler function (displayLociition 处理 承数） 
173 J75 

altering to sKow map only once (修改为只.显不-次地阁 ） 
195 

alternative itnplementation (候选 实现） 197, 210 
calls from watchPosition (从 waichPosidon 调用） ,control¬ 
ling (控制 ）206 

displaying new marker only after traveling more than 20 
meters (只在走超过 20 米之后 才显不 新的记） 

209 

distance (距离 > 

computiition and mapping of (计算和建立地阁）197 
computing (i 十算） 180 

controlling addition of new map markers (控制新地图标记 
的增加 ）2 的 

writing code to find ( 编写代码来査找 > IS1 
<doctype> element (<doctype> 元素 ） 3 

changes in HTML5 (HTML5 中的变化) 9.31 
c hanging HT ML 4.01 doc type to HTML5 ( 将 I ITML4.01 
doctype 改为 IITML5) 4 
omitting (忽略 > 9 

document object (document 对象） 56,154 

createElcment method (ereateEiemenr 方法）99, 101,335, 
450 
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getEkmentByld method (getEkmentByld/j ■法） 59, 157 
ge lElement sB y Tag Name method (getEle me n isB yTagN ame 

方法 ）270 ® 1 ^ 

properties and method (属性和方法 ） 157 
query Selector All method (querySelectotAll 方择） 376, 

542 贫顧 

quervSelector method (querySelector 方法 ） 542 



write method ( 編写方法） 28 

documents ( 文档） ， cross t document messaging (跨文 裆消息 
传递 ） 54 3 

dollar sign ($) (美元 符 （$)) 

S{ } function in jQuery (jQuery 中 $( ) 函数 ) 534 

beginning JavaScript variable names (作为 JavaScript 变嚴 
名的开头 > 40, 42 

domain property {domain. 辑性 ） ，docuineiit object (document 
对象 ） J 57 

domains _ ( 域 ) 

cross-origin issues with 

X MLH ttpRcq ucsts (XMLHttpReq uest 的跨域问题） 

244-253 


local storage allocated per domain (每个域分配一个本地 
存储 ） 422 

origin (源} , and management of local storage (本地存储 
管理 J 422 

DOM (DcMSument object Model) (DOM (文档对象模型） 14, 
31,54-65 

adding ekmenls to (增加元素 ） 100 
adding Stic kies from local storage (从本地存储增加即时 
贴）428,430 
creating (创建 ) 55 

creating new <script> dements to continually update data 
{ 创途新 <script> 元素持续更新数据） 263,267 
deleting sticky note from (从中删除即时赃 ） 4 52 
drawing for songs added to playlist (为增加到播放列表的 
歌曲绘制) 98,1】0 

empty <ul> eieraent for <li> elements to hold song names 
(洁空 <u】> 元素用<1〗>元素包含瞅名） 97 
getting (获取） f creating (创建 ) ,adding (增加）， or 
removing elements (或_除元素 ）66 
getting dements from (从中获取元粜）， using jQuery (使 
用 jQuery) 534 

inability to access or change before page fully loads ( 页面 
完全加载之前不能访问或修改 ) 64 

in&eiling and replacing JSONP <script> element (.插人和 
# 换 _)301^ <script> 元素 ） 26 S 
interaction of JavaScript with (JavaScript 与 DOM 的 交互） 
54 


No Dumb Questions (没有傻 问题 ） 271 
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parsing HTML and building DOM from it (解析 HTML 井 
由它构建 DOM) SI 

replaceChild method (replaceChiki 方法） 270 
returning elements by tag name ( 按标记名返回元素） 270 
se】ecting edements from (.，using Selectors 
API ( 使用选择器 API) 542 
Sharpen Your Pencil exercise ( 动动笔练习 ） 61 
structure and content of (结构和内容 > 56 

stimmary of important points ( 要点 总错） 10® 
workers not nllowed to access .( 工怍线程不允 I 午访问 ） 

480 

dot operator (.) ( 点操作符 (，)） 

accessing object properties ( 访问对象属 • 性） 133» 134 
invoking methods ( 调用方法） 151 
Drag and Drop API (拖放 A PI) 543 

draggable attribute ( 可拖 放属性 ） M3 

drawCircle function (example) (drawCircle 函数（示例 ）） 

318 

writing (编写 ）319 

drawlmage method (drawlmage 方法 ） ,canvas context (亂布 
上下文 ) 333 

drawing on the canvas (在 Ll] 布上绘制） 290-294, 338 
arc method “re 方法） 314 

drawB ird function (example) (drawB.ird 函数 ( 示例 ）） 
334,346 

draw Smiley Face function (example) (drawSmileyFace 函数 
(示例 ） ） 32U344 ^ 

drawSquarc function (example) (drawSqimre 涵数（示例）〉 
302 + 342 

pseudo-code for ( 伪代码 ）303 
writing ( 编写 ） 304 

drawText function (example) (drawText 满数（示例 ）） 
327,330,345 
completing ( 完成 ） 331 
paths and arcs ( 路径和弧） 311 ! 8 

dropshadows ( 阴影） ， in canvas ( 画布中） 335 
dynamic typing in JavaScript (JavaScript 中动忠类型） 39 



effectFunciion 

calHng to apply video filter ( 调用来应用视频波波器） 

397 

used as variable to hold video filter function (用作为变货 
来包含视频滤波器函数 > 391 

effects ( 效果 ） 410 

applying to videos (应用到视频） 389-391 
choice of ( 选择 ） * video booth ( 摄像间 ) 378 


creating using canvas context translate and rotate methods 
( 使用画布上下文转换和旋转方法创违 ）541 
writing special effects for video ( 为视频编写特效） 
399-404 

elcmeiu objects (element 对象 ） 158 

returned by getElemenlByld method (getE】eniemBvId 方法 
返 iHl) 160 

elements ( 元素 ) 

accessing with getElemedtByld ( 用 getElementBykl 防问） 

59 

adding to the DOM ( 增加到 DOM) 100 
creating ( 创建 ） 99 

getting with getEIementById method (用 getElementByld 方 
法获取） 114, 157 

getting with getElememByTagNamc method (用 getEie- 
memByTagN ame 方法获取） i 54 
getting with getEle me ntsBy CI as s Name method (用 getEie- 
mentsByClassName 务法 获取） 154 
getting with getElementsByTagName method (JflgetEle- 
memsByTagName 方法获取） 269 
setting attributes with setAttribute method (set Attribute 
方法设晋厲性 ） 267 

else clauses in if statements (if 语句中的 else 子句 ） 50 
empty strings ( 空串 ) 

as&igmng as value to variable ( 作为值陚给变 S) 26 

checking for ( 检査 ）95 

comparing variables to (比较变 S) 108 

cnableHighAccaracy option (enabieHighAccuracy 选项） 198 + 
201 

encoding your own video (编码你自 ci 的视頻 } 360 

ended event (ended 事件 ）， video ( 视频 ） 365 

adding event listener for ( 增加事件监听器 ） 3SG 
writing handler for ( 编 写处理程序 ） 367 

endedHaiKDer function (exsunpLe) (endedHandier 函数（不例 ）} 

386 

cmimerating properties of an object ( 列举一个对象的属性） 

133 

error handlers ( 错误处理程庄） 

for cache errors ( 缓存错误 ）5 3 8 
Geolocation API ( 地理定位 API) 190.207 
for getCurrentPosition 174, 177-179 
for watchPosition i 94 
video errors ( 视频错误 ) 406 

in workers ( 工作线程中 ）522 
error property (error 属性 ）， video object {video 对象 ） 405 
errors ( 错误） 

browsers overlooking small errors in HTML files (浏览器 
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忽略 HTML 文件中的小错误）9 
GeoJocatiosi API ( 地 J1 定位 API) 
timeout error (超时错误）200 
types of errors (错误类型〉 178 
handling errors with video playback (处理视频播放的错 
误 ）371 

JavaScript syntax (JavaScript 语法 } 44 

local Storage, quota exceeded ( 配额起限 ）458 
no XMLHttpRequesi errors ( 没有 XMLHltpRequest 错误） • 
200 response code (200 响 应码 ） 239 
video error types < 视频错误龙型 ）405 

event handling (亊件 处理） 89 

addEventListener method (addEventListener 方法 ) .regis¬ 
tering event handler (注册事 件处理程序）367 
button dick handler (按钮点击处理程序）102 
clear Watch event handler (dear Watch 率件处理程序 > 195 
creating handler and assigning it to button onclick prop¬ 
erty (创建处理程序并陚至按钮 ondidt 属性）91 
handler alerting user that button was clicked ( 处理程序提 
醒用户点击了按钮 ）92 

handleRefresh function (handleRefresh 函数 ） 265 
handler for ended video event (ended 视频亊件的处理程 
序）386 

handlers for video booth buttons (摄像间按钮的处理程 
序 > 377 

handler to make image of canvas drawing (建立画布绘制 
图擻的处理程序 ）347 

HTTP request handler (HTTP 南求处煙 程序） 221 
one lick event handler (onclick 事件处理程序〉 

createSticky (example) (createSticky (示例 ））431 
deleteSficky (example) {deleteSticky (示例 ））450 
one Lick event handler to zoom in on canvas in Fractal 

Viewer (Fractal ¥16从以中0!«:〖】£：1!：事件处理程序在画 
布上放太图像）515 

onload event handler for twitter bird image (example) (on- 
bad 事件处理程冰 M 示 twitter 小鸟图像（示例 ））333 
onload event handler function for Mighty Gumball (example) 

C Mighty Gumball 的 onload 亊件处理頃 数 （ 示例 ）） 
229 

onload handler as anonymous function (onload 处理程序作 
为匿名函数 ）156 

on message evetit handler for Web Sockets (Web Sockets 的 
omnessage. 事件处理 程序） 539 
on message event handier for worker (工作线程的 onmes- 
sage 事件处理程序 ）485 

onopen event handler for Web Sockets (Web Sockets 的 
onopen 事件处理程序 ）539 

previewHandler function (example) (previewHandler 函数 
( 示例 ））302 

rev Lew of important points (要点回顾 > 108 


reworking handleButtonClick to obtain song title typed into 
form by user ( 修改 handleButtOrtClicJc 来得到用户在 
表单中键人的歌名 > 96 ~ 

types of events handled by JavaScript (JavaScript 处理的也 
件类型 ）95 0 

event object (event 对象） 

data and target properties (data 和 target 厲性） 485 
dataTransfer property (dataTransfer 属性） 543 
target property (target 厲性） 451 

events ( 事件） 

anchor click event ( 敏点击 事件 ） 376 
button click event ( 按钮点击事件） 90-^93 
cache {缓 存） , Dotification of (通知) 538 
canvas click event ( 画布点击事件） 347, 383,. 515 
dragstaxt and dragend c vents (dragstart ^Odragend 事件） 

543 

image load event ( 圉 像加载事件 ）333 
properties for event handlers in objects (对象中事件处理 
程序的 属性）154 

request load event ( 请求加栽亊件） 221,222/229 
video ( 视频 ） 363 

video ended event ( 视频完成事件） 367, 386 
window load event (窗口 加载亊件 } 64. 129,155,156, 
158,159 

exceptions ( 异常）， QUOTA_EXCEBDEI>_ERR 458,468 
exercises (练习） 

BE the Browser ( 扮演浏览器） 48, 78 
building a DOM ( 构建 DOM) 57,8 】 
interface element values (接 口元素值） 299. 341 
interpreting call to arc method ( 解释 arc 方法调用） 

3 17, 343 

rendering user interface ( 呈现用户界面 ）298 
Web Workers <Web 工作线程） 48S t 526 
cliff-hanger ( 惊险情节） ， moving to live server (转移到 
实际服务器） 239,242 
Code Magnets ( 代码磁姑） 51 T 80 

canvas ( 两布 ）， drawText function (drawText 函数 ：> 
327,345 

geolocatipn (地理定位 > 209 

lucky/unlucky web service (幸运 Z 1 不幸运的 Web 服务） 
223 r 224 

Movie constructor (Movie 构造 函数） 150,152 
"what is HTML5?" ( # 什么是 HTML5? ”）30 
Crossword Puzzle ( 填宇游戏） 
canvas (画布 > 340, 346 

fu nations and objects (函数 和对象 . ） 161 T 163 
geoLocacion ( 地理定位） 20.8.，212 
HTML5 32,34 

interactions of HTML and JavaScript < HTML 与 
JavaScript 的交互） 109,111 
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JavaScript 76, 84 

local storage ( 本地存储） 465.471 
video ( 视频） 409,411 

Web aj>p& talking Lo the Web (Web 应用与 Web 通信） 
278,280 

Web Workers (WebJ ： 作线程） 525,528 
Don't Try This M Home ( 不要 尝试 } 

how fast browser can find location (浏览器多快找到位 

It) 202 

local storage ( 本地存储 ）， cxceeding quota (魎出配 
W 458,468 

Express Yourself (JavaScript ) (表达 己 (JavaScript) ) 44 
HTML5 archaeology (HTML 考古 ） 20 
Pseudo-Code Magnets (偽 代码磁贴） ,drawSquare 
function (drawSquare 函数） 303, 342 
Sharpen Your Pencil ( 动 动笔） 

adding song titles to playlist ( 向播放列表增加歌 
名） ^5,82 

canvas (_ 布 ）， drawText function (drawText 函数） 
330 

canvas ( 闽 布 ) _ T showing only new squares in pre¬ 
view (闱览 4 1 只显示新方块） 306, 342 
DOM with secret message ( 有秘密消息的 DOM) 61 
functions (函 数） 122 f 162 
geolocation (地理 定位） 171,197,210 
HTML5 markup (HTML5 标记） 3 T 7,S 
JavaScript stalemems (JavaScripti 吾句） 44, 77 
local storage { 本地存储）， deleting a sticky (刪除即 
时贴） 447,448 

local storage ( 本地存储 ) f problems with stickies 
implementation ( 叩时貼实现的问 ■) 437,467 

populating list items from an array ( 从数组填充.列表 
项） 69.83 

reworking hsndieButtonCl ick func[inn (^^thandleBut- 
ttmGkk 函数） 94. 96 

testing for user input on a form (表电上测试用户输 
人） 94,96 

using sellnterval in web applicaUons (web 应用中使用 
setlnterval) 266 

video control buttons ( 视频控制按钮 ） ,toggle or 
radio (开关或申 - 选） 3S0, 382 
video playlist ( 视频播放列表 ） t impiementing (实 
现 } 364,365 

video ( 视頻 )» western and sci-fi effects (西部片和科 
幻片效果） 400,410 

Web Workers (Web 丁 ― 作线稈 ) 481,490,527 
Shell Game (采売 游戏） p local storage ( 本地 存储 } 425 + 
466 

Who Does What? ( 连连看） 

geolocal ion options ( 地理定位选项） 200,211 
HTML5 family of technoJogies (HTML5 技术家族） 
16,33 

localStorage API 461 1 470 


expre^ioiiK ( 表达式） 39,43 
evaluating (1 十算） 44, 77 
type conversions ( 类型转换 ） 45 



false (boolean value) ( false (布尔直 39 
family of technologies ( 技术家族 ) 12, 29 

function of each ( 各自的 功能） 16.33 
file extensions for video ( 视频文件扩展名） 352 t 369 

fil 1BackgroundCoLor function (fi"BackgroundCo!or 函数） 

306, 342 

calling ( 阅用） 307 

Sharpen Your Pencil exercise ( 动动笔练 9 ) 306, 342 

fill method (fill 方法 ） ，canvas context (_ 布上下文 ） 312 

fillRect method (fillRect 方法 ） + canvas context (画布上下 
文） 292,304 

effee ts of fill Style property on (fill Style 属性的 效果 〉 308 

fill Style property (fillStyle 厲性 ） ,canvas context (画 布上下 
jc) 304 

closer examination of ( 进一步分析 ）308 

fillText method (fillText 方法 ) ,canvas context (画布上下 
文 ) 325,328 

using with tweel lest (example) ( 使用微博文本 （ 示例 ）） 

331 

film noir video filter ( 黑白片视频滤波器） 374 r 399 

Firefox , 参见 browsers 

HTML5 support (HTML5 支持 ） 18 
Ogg/Theora video (Ogg/Theora 视频 ） 357 
.ogv video files (*ogv 视频文件 ） 352 
WebM/VPg video (WebM/VPJi 视频 ） 357 
Fireside Chats ( 围炉夜话） 

Cookie and Local Storage (Cookie 和本地 存储） 426 
XMLHltpReqtJest and JSONP (XMLHupRequest 和 
JSONP) 260 

fimCluld property (firstChild 域性 ） ,element object (element 

对象 ） 158 

Flash 

HTML5 versus 284 

u^e to solve cross-browser issues (用莱解决玲浏览器问 

M) 20 

FJash Video (Flash 视频） 35R 
flexbox layout (flexboit 布局 } 548 

floating point numbers ( 浮点数 ) 

conversioo of integers u> iu expressions ( 表达式;中格数转 
换为 > 45 
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storing in local storage ( 本地存储中存储 ） 423 

fonl property (font 厲性） ， canvas context (画 布上下文） 329 
setting for tweet text (example) ( 设宽微博文本 { 示例 ）） 

331 

<footei> element ( <footer> 元素） 546 

for Loops (for 循环 } 47 

deciding between while loops and ( 决定 while 循环还是） 

47 

evaluating (example) ( 计算（示例 ））48 
if/eJse statemenls in (if/e 】 se 语句 ） 51 
forms ( 表单） I6 T 85 - 112 

adding button to ( 坊 加按钮 ） 9J 

adding t-shirt design form to HTML page (向 HTMLM 面増 
加 T 恤设计表单 ）301 

adding tweets to <select> dement in form ( 向表单中的 
<56160 元素增加微博 ）323 
checking whether user entered text input (检査用户是否输 
人文本 ）96 

cJient-side ( 容户端 ）, accessing values in ( 访问值 ）296 
displaying playlist on HTML page ( 在 HTML 贞面上显示播 
放列去 ）97 

getting text from input element ( 从输人元素获取 文本 } 

94,108 

HTML5 document to hold form and list dement for 

Paylist (HTML5 文档包含播放列表的表争和列表元 
素 ）87 

pJayJist manager application ( 播放列表管理器应用 > 102 
sticky note appJication ( 即时貼应用 ）429 

updating to add colors ( 吏新来增加颜色 ）453 
tracking position ( 跟踪位 193 
t-shirt application interface (T 恤应用界面 ） 298 
using JavaScript for real interactivity ( 使用 JavaScript 实现 
真正的 交互性 ） 23 

forward slashes (//) (前斜线 （〃)__ > T beginning JavaScript 
comments ( 作为 JavaScript 注释的并头 ）39 

Fractal Explorer application (Fractal Explorer 应用 > ’ building 
(example ) (构建 ( 示例 ) > 494 T 503 

creating FracLal Viewer HTML page ( 创建 Fractal Viewer 
HTML 页面 ）503 

creating workers ( 创 建工作线程 ） and giving tasks to (分 
配任务 ）508 

final test drive ( 最后的测试 ）519 

getting workers started ( 启动工作线程 ） 510 

handling click events to zoom in ( 处理点击亊件来放大） 

515 

how number of workers affects performance (工作线程个 
数如何影响性能 > 520 

implementing workers ( 实 现工作线程 ）511 


managing fractal generations ( 管理分形代 ）518 
processing workers p results ( 处理工作线程的结裝 ）514 
ready-baked code for Mundelbrot Set 

computation (Manddbrat 集计算的成品代码 > 
504-507 

tasks ( 任务 ）512 贫顧秘 

writing the code ( 編写代码 ） 509 

fractal image (分形图像 ） ,Mandelbrot Set as (Mandelbrot 
M) 495 

FTP programs (FTP 程序 ）232 
fullscreen playback of video ( 视频的全屏播放 ） 360 
functions { 函数 ) I13~130 r 160 
anatomy of ( 剖析 ） 121 

assign ing to w indow object { 指定到 w indow 对象） ， on Load 
property (otlkmd 属性 ） 75 
built in (内 置 ） 119 
callbacks ( 回调） 254 
cons tructor ( 构遗阐数 ）】 4 7 
creating your own (创 建你自 己的 〉 115 
Crossword Puzzle ( 境字游戏） 161, 163 
declarations (声明） T placement of (放燹） i27 
defining (定义 ） 71 
how it works ( 如何工作 ） 116 

inability to pass to Worker constructor ( 不能传递到工作线 
程构造函数 ） 49J 
interview with (坊 谈 ）1 19 
invoking ( 调 用 ） 116 
iife span of vanables ( 变置生命期） 125 
Math library (Math 库） 75 
methods versus (方法与） 151 
naming ( 命名） 121 

No Dumb Questions ( 没 有餿问 题） 121.127 
object parsed to ( 对象传递到）， accessing properties of 
( 访问厲性 ） 134 

parameters and arguments ( 形 # 和实参 } 120 
pa ss i ng a func tion to a func tion ( 将闲数传递到函数 ）】7 5 
passing arguments to parameters ( 将行参传递实参） 122, 
162 

psssing objects to ( 传递对象） 134, 136 
return statements in the body ( 体中的返回 语句 } 117 
re working as method s ( 修改为 方法 ） 143 
scope of local und global variables (局部和全局变 M 的作 
用域 > 124 

setting special effects for videos { 设置视频的特效 ）391 
functions ( 函数 ) 

Sharpen Your Pencil exercise ( 动动笔 练习） 122,162 
using as values ( 用作为值） 129 
as values ( 作为值） 128 
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variebles. defined in ( 其中定义的变进） 123, 160 



generation ( 代 ） T fractal (example) ( 分形 ( 示例 ）） 518 
geolocation ( 地理 定位） 165~212 

accuracy of location ( 位置精度 ） 193 
adding a Gt>og〗e marker to your map ( 为地图增加 Google 
标记） 186 

adding a map to your page ( 向页"面增加地 HI) 183 

Crossword Puzzle ( 墙字游戏） 20.8, 2】 2 
displaying map on your page ( 在筑 ife] 上显示地图） J84 
Don't Try This At Home exercise ( 不要尝试练习 ） 202 
error handler (错误处理程序） 177 
finding how fast browser can find location ( 査# 浏览器多 
快找到位 1) 202 

getCurrentPosition method (getCurrentPoskion 方法 ） 175 
how getCurrentPosition works (getCurreiuPosition 如何工 
怍 "76 

mapping your positit>n ( 映射位 S) 182 

No Dumb Questions ( 没有傻向题 ）! 66 T 197 

other uses of Google Maps (Google Maps 的其他 用法） 

18B 

server required to test code on mobile devices (需要服务器 
在移动设备上 _ 试 代码 ） 179 
Sharpen Your Pencil exercise ( 动动笔练习 ） 171 
alteniiitive implementation for 

disp】ayLocation (displayLocation 的候选实现） 
197.210 

specifying options (. 指定选领 ） 2 0l 
success handler for getCurrentPosition (getCurrentPosition 
的成功处理程序） 174 

summary of important points ( 要点总结 ） 207 
timeout and maximum Age options (timeout 和 maximum 二 
Age 选项） 199 

tracking movements (跟踪移动 > 192 

clcarWatch handler (c\c arWatch 处理程序） 195 
wi：h markers on a map (地图上用标记） 204 
watchLocation handler (watchLoealion 处理 程序） 

194 

watchPosition method (watchPosition 方法 ） 192 
Who Does What? exercise ( 连连看练习） 200. 211 

Geolocation API (地理定位 APT) 16> 参见 ££0^3 如 11 (地理 

定位） 

co mponents of ( 组件 ） 190 

getCurrentPosition method (getCurrentPoshion 方法） 

174, 177, 190,207 
interview with ( 访谈 ） 189 
position op lions (position 选项） 198 


w ate hPosition method (watchPosi tion 方法 ） 194 

geolocation property (geolocationj^^) h navigator 
object (navigator 对象 ） 174 

get A (tribute rnethod (get Attribute 方法 ） ,clement 
object (eleme n t 对象 ） 15 8 s 379 

gciComcxt method (㈣ Context 方法 ） ,canvas object (canvas 
对象） 292 t 293 

getCurrentPosition method (getCu rrentPos iti on T geolo* 

cation object ( 对象） 174, 190, 207 
error handler for ( 错误处理程序 ） 177 
how it works ( 如何工作 ） 176 

getEIementByld method (getElementByld 方法 ） „ document 
object (document 对象） 58, 72, 157 
using to locate clement and change its content ( 用来； ^位元 
素井改变内容） 59,60 

getElemerits ByClas sName method (getElemenfs ByC ame 

方法 } . documciU object (document 对象 ） 157 

getEle mentsB yTagN ame method (getElements ByTagN ame 
法 ） ,document object (document 对象） I57 t 270 

getFormatExtension function (example) (getFonnatExterision}^ 
数（示例 > ) 369, 370 

adding to video booth code ( 增加到摄像间代码 ）383 

getltem merhod (getltem 方法 ） ,local Storage 
object (localStorage 对象） 419, 421 

get My Local ion function (example) (getMyLocation 丞数《示 
例 ）） J72 

getNextShowing funclton (example) C getNextShowing 函数 
( 示例 "140 

GET request (HTTP) (GET 请求 （ HTTP) ) 220 

gelStickiesArray function (example) (getStickie&Array 闲数 
( 示例 ））443 

getTimeFromString function (example) (getTimeFfomStringES 
数（示例 ））140 

getTime method (getTime 方法 ） ,Date object (Date 对象） 
140,272,442 

global variables ( 全局变量》 123, 160 
life cycle of ( 生命期 ） 125 
overuse in JavaScript (JavaScript 中灌 ; 用 ） 127 
reasons for sparing use of ( 减少使用的原因 ） 127 
shadowing ( 屏蔽 ）126 

Google Chrome 参见 Chrome 

Google Maps 182 

adding marker to your map ( 向地图增加记） 186 
LatLong constructor (LatLong 构造函 . 数 ） 183 
other uses qf ( 其他用法 ） 188 

GPS (Global Positioning System) (GPS ( 全球定位系统 ）） 

J6S 
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devices without ( 没有 GPS 的 设备 ) T using Gcolotation 
API on < 使用地 理定位 APi) IS9 
graceful degradation ( 妥魯降级） 19 
graphics (图形 ) ,SVG 537 

Greenwich (格林 威治 ) t England (英国 ） * measured from 
( 经度测银 ） 167 



H.264 video format 264 视频格式） 352, 356, 357 

handleButtonCltck function (example) {handleButtonClick 函数 
( 示例 ）） 卯 

assigning lo button one Lick property (賦给按钮 onc】ick 属 
性 ） 91 

tode to create <li> child clement and add it to DOM ( 创建 
<11> 子元素并增加到 DOM 的代码 ） HH 
reworking to obtain song title typed into form by user (修 
改来得到用户在表单中键人的歌名） 94,96 
running when user clicks buiton (用户 点击 按钮时 运行） 

93 

handled ick function (example) (handieCVidt 函数 t 示例 ）） 
515,516 

handleControJ function (example) (hatidleControl 函数 (示 
例 ）） 377, 3S4 

imp]emeriting resr of video comro】s (实现其余的视频控 
件 > 385 

handle Re fresh function (example) (handleRefresh 函数（示 
M) ) 265, 267 ； 272 

adding lastreporttime parameler ( 增加 lastreporttime 参数 ) 
275 

handleRequest function (example) (handJeRequesl 函数 (/{< 

例 > ) 523 

<he iid> dement (chead> 元素） 

<Unk> and <script> elements (< 1 加 1 (> 和 < 5 < ； !^ 1 > 元素） 
in 5 

placing <script> elements in ( 放 ！ !<script> 元素 ） 53 
re pi acing <script> child cl ements ( 替換 < script> 子元素） 
270 

<header> element (<header> 元素） 546 

heading property (heading 域性 ） T coordinates 
object (coordinates 对象） J90, 197 

<hgroup> clement (<hgroup>^;^：) 546 

hosting services ( 托管服务） 230, 232 

HTML 

interaction of JavaScript with markup 54 


parsing and building DOM from 57 
HTML5 穩 .O \ 

converting HTML 4,01 document to (转换 HTML 4.01 为） 
2-5 

Crossword Puzzle ( 填字游戏） 32,34 
interactions of HTML and JavaScript (HTML 与 : favaScript 
交 S ) 109, "1 

family of technoJogies ( 技术家族） 12, 16,33 
final recommendation of standard ( 最终推荐标准 ） 20 

handling older browsers ( 处埋较老的浏览器 ）19 
how it really works (到底如何 工作 } 14 
improvcments in markup ( 标记改进 ） 14 
interview with ( 访 谈 〉 11 

JavaScript as integral part of (JavaScript 作为一 部分 } 24, 

ns t no 

JSON and JSONP USON 和 JSONP) 271 
magnets exercise ( 磁貼练习 ）， “what is HTML5?” （什 
么是 "HTML5" ) >0 

markup ( 标 记） T JavaSeriptAPls, andCSS 29 
Mighty Gumball appJication page (example) (Mighty Gum- 
ban 应用页面（乐例 ）） 

new capabilities and features ( 新功能和特性 ） 12 
new dements ( 新元素） ,reference ( 引用 ） 545 
No Dumb Questions ( 没有傻问题 ）\ 20. 28 n 284 
page for t-shirt design application (T 恤设计症用页面 ) 

300 

prerequisites For Jearning (学习的先决条件） 10 
Sharpen Your Pencil exercise (动动笔 练习） 3,7 
summary of important points (要点总结） 31 
support in browsers ( 浏览器的 支持 ） 18 
versus using Flash or custom applications ( 与使用 Flash 或 
定制应用相比 > 284 

what is if ( 是什么 ） 12 

what you can do with HTML5 and JavaScript (利用 
HTML5 JavaScript 你能做什么 ）22 
Who Does What? exercise ( 连连 # 练习） 16, 33 

HTML entities in tweets on canvas ( 闽 布上微 博中的 HTML 实 
体 ）335 

HTTP-based reque st/re sponse mode 1 ( 基于 HTTP 的请求 / 响应 

模型 ）539 

HTTP-based video streaming ( 基千 HTTP 的流式视颊 ） 4(M 

HTTP used with XMLHttpRequest (HTTP 结合 XMLHttpRe- 
quest) 

HTTP requests (HTTP 诮求 > 219,220,239 

HTTP responses (HTTP 响应） 219,22J T 239 

accessing returned data ( 访问返回的 数据 ） 222 
server required to use ( 使用时諶要有服 4 器 ）230 
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id attribute < id 属性 ） * 参 ! SL getEkmemByld 

method (getEkmentBy]d 方法） t document 
object (document 对象） 
accessing elements by (访 问元素 > 59 

<canv as> d ement ( <canvas> 元 素） 290 
needed to delete sticky note (example) (_ 除即时貼所需 
(示例 > > 450 

<script> element (<seript> 元岽） 267 
<video> elemeiU (<video> 元素 ） 353 
IE. See fmernei Explorer 
if statements (if 语句） 49 
if/clse statements <if/else 语句） 50 
<iframe> element {<iframe>7C^) 543 

[IS servers (IIS 服务器） ， configuring MIME’types (S 己晋 
M】ME 类型） 371 

image ( 像 ） t making of t-shirt design drawn in canvas (圆 
布中绘制 T 恤设计 > 347 

image objects (image 对象） 
creating < 创建 ) 333 
lm age con strut tor (I mage 构造函数 ） 335 

<img> element (<img;> 元素 .) t <canvas> versus 285 
jMovie, encoding video with ( 编码视频 ） ^60 

imports cri pt s g lobmt fu nction (j mportScripts 全 闻函数 ） ^ Web 
Workers (Web 工作线程） 493,511 
using to make JSONP requests (用来建 JSONPi 宵求） 

523 

Indexed APT 543 

Indexes ( 索引 ） ,array ( 数组 ） 75 
[nfoWindow object (TnfbWindow 对象） 187 
init function (init 通数） 64 

as anonymous function ( 作为匿名涵数 ） 159 

inline code (内联 代码） T writing in HTML5 <script> ele¬ 
ment ( 编写 HTML5<script> 元素 ） 5 

innerHTML property (irnierHTMLUfl；) 60 

element object (element 对象 } 158 

using to change eJement content ( 用来改变元索内容 ）62 

insertBefore method (inserlBefore 方法） t element 
object (clemem 对象 ) 158 
integers ( 核数） 

conversions to duating point numbers in expressions (-表达 
式中转换为 浮点数 > 45 

⑶ irverting from strings ( 从字符串转换 ）423 
storing in local Storage as strings (localstorage 中作为字符 
串存储 > 423 


interface transformations on dements (元索 k 接 U 转换）， us¬ 
ing jQue ry (使用 j Query) 535 

Internet Explorer . 泰见 browsers ( 浏览器） 

canvas support ( 画布支持 ) ,versions 9 and later (IE9 及 
以后版本） 294 

HTML5 support (HTML5 支持 ） 18 
MP4/H,264 video <MP4/H.264 视頻 ) T supported by (支 
抟） IE9 357 

no Web Worker support prior to 1EI0 (IE 10 之前不支持 
Web 工作线程 ） 482 

versions 6 and 7 ( 版本 6 和 7) , not supporting locals tor- 
age (不支持 kjcalStorage) 104 

video file format ( 视频文件格式 ） 352 
XMLHttpRequest object and ( XMLHlipRequest 对象） 

24Q 

interval timer ( 间隔定时器） ,stopping ( 停止 ） 27! 
interviews ( 访问） 

with fuaction (幽数） 119 
with Geolocation ( 地理定位） 189 
withHTML5 II 

with JavaScript (JavaScript) 24, 477 
with Video ( 视颊 ）388 
with XMLHttpRequest 225. 240 
invoking functions (调用 函数 〉 116 
with arguments ( 提供参数） 1H) 

IP address (IP 地址 ) ,location mlomiation based on (基于位 
置信息） 168 

isB.uttonPushed helper function (example) (isBuuonPushed 
助函数（示例 ）） 379, 384 

iterating through local Storage ( 通过 localStorage 迭代 ） 424 



lavaScript 31 T 35^54 

adding behavior with (增 加行为 ） 35 
adding to web pages (增 加到 Web 页面） 53 
APIs 15 

arrays ( 數 组） 67 1 69, 71-73 
and objects ( 对象） 133 
passing to functions ( 传递到威数） 122 
passing to Web Worker ( 传递到 Web 工作线程） 484 
re lymcd from ge tEleme^tsB yTagName ( 从 getEle - 
m cntsB yTagN ame 返回 ） 270, 271 

returned from q ye ry Selector AH (Ak query Selector AI \ jS 

回 > 376 _ 

and <select> element options ( <sekct> 元素 选项〉 
303 

storing in local Storage (local Storage 中存姑) 439, 
445 
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associative arrays (关联数组 > 424 

BE the Browser exercise < 扮演浏览器练习） 48,78,81 
browser security policy and ( 浏览器安全策略） 244-246 
Code Magnets exercise ( 代码磁貼练习） 51,80 

canvas ( 画布 ） t drawText function (drawText 涵数） 
327 

displayLocation handler function (dUpIuyLocation 处理 
函数 ）209 

Movie constructor (Movie 构造函数） 150,152 
creating dynamic HTML page cotilent ( 创建动态 HTML 页 
面内容 > 28 

Crossword Puzzle ( 填字游戏） 76, 84 

functions and objects ( 函数和 对象） 16I t 163 
interactions with HTML ( 与 HTML 交互） !09 t III 
tiedaring a variable ( 声明 变敌） 38-40 
default scripting language in HTML5 (HTML5 中默汄脚本 
语言 ） 5 

drawing on canvas (llj 布上绘制 ） 285 
enabling preview button on t-shirt design app 
用中启用预览按钮） 302 
expressions ( 表达式 ）43 
functions ( 函数） 113-130, 162 

summary of important points { 要点 总结 ） 160 
getEIementByld 58 
handling events ( 处理事件 ）89 

review of importanl points ( 要点回顿 ） 108 
how it handles tasks of typical page (如何处理典型页面的 
任务 ） 474 

how xi works ( 如何工作 ）36 
and HTML5 21,22, N 8 S 130 
Image constructor (Image 构造函数 ） 335 
including additional files in worker (工作线程中包含额外 
文件 > 493 

interaction with page through DOM ( 通过 DOM 与页面交 
互 ) 15, 58 

interEiction wiih your page (与 面交互 ） 54 

interview with ( 访谈 ) 24, 477 
jQuery 534 

line-by-line analysis of code (代码的逐行分析 > 26 

nmkiing decisions { 决策 ）， using conditional staiements 
(使用条件语句 > 49 

making HTTP requests from (HTTP 请求） 220-225 
making use of HTML5 family of technologies (利用 
HTML5 技术家族 ）24 
Modem izr Library (Modemizr 席 ) 532 
No Dumb Questions ( 没有傻问题） 28,41,47, 73 
events and handlers ( 亊件和处理程序） 9S 
functions ( 邊数） 121， 127 
functions and objects ( 函数和对象 ） 151 
objects ( 对象 ）158 


Web Workers (Web 工作线程） 49 ! 
objects ( 对象） M 3 , I31-I6I 

summary of importanl points ( 要点总结 ） 160 
property values in ( 厲性 fi：) 308 

repetitive tasks using Joop.s ( 使用循环 的甫复 任务） 

46-48 

reserved words ( 保留卞 ）41 

Sharpen Your Pencil exercise ( 动动笔练习） 

display Location implementation (displayLocation 实 
现） 197,210 
functions ( 函数） 122 , 162 

populating Iisl items from an array ( 由数组填允列表 
项） 69,83 

populating playlist items using an array (使用数组填充 
播放列表项） 65,82 

reworking handleButionClkk function ( 修改 handleBut- 
tonClick 函数)舛 
statements (tg_) 44, 77 

using setintervai in Web applications (Web 应用中使用 
setlnterval) 266 

single-threaded model ( 单线程模型） 474 T 477 
summary of important points ( 要点总结） 75 
synux ( 语法 ） 39 

testing code in HTML page ( 测试 HTML 页面代码 ） 27 
using with HTML5 (盛用 HTML5) 22 

working with canvas and video ( 处理両布和视频 ） 388 
writing ( 编写 ）25 

jQuery 534 

online documentation and tutortaJs ( 联机文档和教程 ) 

535 

JSON (JavaScript object Notaiion) (JSONN (JavaScript 对象 
法 ）） 226 

adding support to web application ( 增加对 web 应用的支 
持 ）236 

converting movie object eo and from JSON string format 
(example) (movie 对象与 JSON 宇符串格式之间的转 
換（示例 > ) 227 

creating string representation of an array (创建数组有字符 
串表示） 44】，467 

Crossword Puzzle ( 填字游戏） 278,280 
as &dfd ( 作为数据） 249-251 

gumball sales relumed from Mighty Gumball (example) 

(Mighty Gumball 返 M 的糖果销售信息 { 示例 > ) 

233 

HTML5 and 271 
and JSONP 252 

No D_b Questions (没有傻问题 > 271 
performance issues whh use to convert to and from 

strings (用来与字符串之间转换存在的 性能问 题） 

442 
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tweets returned from Twitter (example) (Twitter 返回的微 
博 ( 示例 } ) 323 

URL to include last report time (example) (URL 包含最后 
一次报告时间（示例 ）> 275 

XML and 226 
and XMLHttpRequest 225 

JSON parse method (JSON .parse 方法） 226 

con verting J SON string back to object (J SON 字符串与对 
象之 fH] 的转换 ）227 

using on arraya or objects retrieved from localStoragc (从 
localstorage 获取数组或对象） 443, 445 
using when object stored in localStorage (kjcalStorage 中存 
储对象时使用 ）455 

JSONP (JSON with Padding) (JSONP ( 带填充的 JSON)) 

240 T 247 

Cross word Puzzle ( 填字游戏) ！ 278 T 280 

Fireside Chat with XMLHttpRequest ( 与 XMLHttpRequesl 
围 炉夜话 ) 260 

HTML5 and 271 
introduction to ( 介绍 ） 252 

making call to Mighty Gumball ISONP API (example) 

(Mighty Gumball JSONP API 閧用 ( 示例 > > 257 

making citll to Twitter JSONP API (example) (Twitter 
JSONP API 调用 （示例 ）） 322 
making it dynamic (使它为动态) 264-271 
No Dumb Questions ( 没為傻问题） 27 i 
Pin JSONP (JSONP 中的 P) t defined (定义 ） 253 
security and ( 安全性 ）259 
summaTy of important pomts ( 要点总结） 277 
updating weh application with ( 更新 web 应用） 256™26.^ 
using importScripts to make requests..( 使用 importScdpls 建 
立请求 ）523 

JSON -stiingify method (JSON,stringify 方法） 226 

converting abject to JSON string format ( 对象转换为 JSON 
字符串格式 > 227 

storing object in local storage ( 对象存储在 - 本地存储） 

454 

using to store amiys or object in localStorage (用来狂 
localStorage 屮存储数组或对象） 442,445 

K 

key method (key 方法 ） t locaJStorage object (localStorage^ 
象） 424,430 

key/valuc pairs (键 / 值对 } 

m browser's local storage (_ 览器本地存储中 〉417 

creating unique keys ( 创建唯一键 ) 442 

managing keys in stitkies application (即时贴应用中管理 


键 ）433 

passing key each time sticky note is added to DOM ( 每次 
印时贴增加到 DOM 时传递键 > 450 

storing in an array (存储在数组中 ） 439 
in string form (宇符串形式）， getting and setting in Jpcal 
storage ( 本地存储中获取和 设置 } 419 t 42i 
uniqueness of keys in local storage (本地存储中键的唯一 
性）422 

using key to remove item ffom locaiSior^ge and array (从 
locals torage 和数组使用键删除项）451 



<】 abd> demciU (<I abel> 元素 > 45 3 

lastreporttime query parameter (example) Uastrcporttime 究询 
参数（示例 ））275 

latitude and longitude (韩度和经度 ） 167 

accuracy of geolocation information (地理定位信息的精 
度 ）179 

latitude and longitude properties (latitude 和 longitudeM 性）， 
coordinates object (coordinates 对象） 184 

layouts (布局 ) .new ( 新增 ) T inCSS3 (CSSS 中 ）548 

length property (lengthM 性) 
arrays (数 组） 68 

localSloragc object (localStorage 对象） 424, 430,. 432 
letter-boxing video (letter-boxing 视频 ） 354 
Ime breaks m HTML (HTML 中的 换行） 26 

lines (线） t drawing shapes in canvas (画布中绘制形状) 

3H 

lineTo method (HneTo 方法） T canvas context (I_ 布 t 下文） 

311 

line Width property (lineWklth 域性） ,canvas context (両布上 
下文） 312 

<link> elements (<lint> 元 素)、 within <head> dement 

(<head> 元素） * pointing to CSS stylesheet (指向 CSS 
样式表 ）5 

Linux 

Apache server (Ap..ache 服务器） _ configuring MIME 
types ( 配 WmME 类型 ) 371 
setting up server on C 建立股 务器） 331 

lists (列表） 

adding songs to playlist with JavaScript (example) (用 
JavaScript 向播放列表增加歌曲（示例 ）） 65,82 
creating <li> defnents (创建 <U> • 元素 ） 兮 9 
filling in items using anay (example) (使用数组塽光数据 
项（承例 ）） 69 

finding all child <li> eJeniems of element with id of play- 
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list ( 査找 id 为 playlist 的元素的所有子 < 〗 !> 元 素 ）. 
using jQuery ( 使用 jQuery} 535 
playlist manager (example) ( 播放列表管理器座用（示 
例 " 

adding <Li> child eJement to <u!> parent (向 <ul > ■父元 
素增加 <li> 元素） I00 T IIU 
<Ii> elements to hold song names (<li > 元素包舍歌 
名） 97,^9 

<ul> element to hold playlist ( < 1 ! 1 >元 素包含播放列 
表） 87 ； 97 

setting backgroitnd color for aLtematidg rows (设置隔行背 
赍色 ）MS 

stickics appiication (example) (Spot 贴应用 ( 示例 > > 
creating <li> element to hold sticky note ( 创 ■ 建 <li > 元素 
包含即时贴 ）430 

stick ies from local Storage inserted into <ui> 

dement ( 〖 ocalStorage 中的即时 H 占插人到 <u 】> ■元 
素 ）430 

<ul> element to hold stickier (<ul> 元素包含即时貼 ) 
429 

load event ( 加栽亊件 ) 

and image onload property ( 阐像 onioad 属性 } 333 

and window.on3.oad property ( window.ouload 属性） 64 

load method (load 方法 )• 

audio object (audio 对象 ) 533 
video object (videa 对象 ) 385 
Local File& origin ( 本 地文件源 ）422 
local storage ( 本地 存储 ) 16, 108,413-472 

5MB limit and domain (5MB 限制和域 ） 422 
access by workers ( 工作线程访问 ） 491 
array-based code (基 T"' 数组的代码） ， integrating Into 
stickier application ( 集成到即时贴应用 ）443 
: mociative arrays ( 关联数组 ） 424 
browsier-based ( 寒干浏览器 ）， instead of cookies (而不是 
cookie) 23 

browser is sues with file：// (file :" 的浏览器问题 ）422 
browsers' tools for matiaging ( 浏览器 II 具用于管 ■) 43 4 

browser storage ( 浏览器存储 ） * h istory of ( 历史 ) 
4L4-4J6 

code to save playlist ( 保存播放列表的代码） 】04 
Crossword Puzzle ( 填宇 游戏） 465 > 471 
deleting items (删除数据项丨 446 
designing your application storage ( 设计你的应用存储） 
457 

Don't Try This At Home exercise ( 不 要尝试练习） 458, 
468 

exceeding capacity of ( 超出容 .SL) 458 
Fireside Chat ( 围炉夜话 ）， Cookie and Local 
Storage (Cookie 和本地存储 ） 426 


how HTML5 Web storage works (HTML5 Web 存储如何工 

作 ） 417 :：:“ :七， I : -： iV ' y ； 

how local storage API works ( 本地存储 AP 〖如何工作） 

420 

IndexedDR and Web SQL (IndexedDB 和 Web SQL) 543 
naming of keys ( 键命名） 433, 445 
No Dumb Questions ( 没有傻问题） 422,425, 433, 442, 
445 

problems with using length to store keys (使用长度存館键 
的问题 ） 436 

sessionStorage object (sessionStorage 封象 ) 460 
Sharpen Your Pencil exercise ( 动动笔练玉】 ） 
deleting a sticky ( 删除即时贴） 447, 448 
problems with stickies implementacion (即时贴实现的 
问题） 437,467 

Shell Game exercise ( 果売练爿 ） 425,466 
stiddes application ( 即时姑应用） 418,428 
storing arrays ( 存储 数组 ）440 
storing non^String data types ( 存储非字符串数据类型） 
439 

storing numbers ( 存储数字 ）423 
storing objects ( 存储对象） 454-^457 
summary of important points ( 要点 总结） 464 
using ( 使用 ） 462 

Who Does What? exercise ( 连连看练习） 461,470 
localStorage object 《 localStorage 对象） 4H8 
clear method (ckar 方法 ） 435 
getltenn method (getltem 方法） 4I9 T 421 
key method (key 方法 ） 424 
length property (length 獨性） 424 
re move Item me thod (. re movelte m 方法 > 433.446„ 449 

setltem method (setltem 方法） 418 + 421 
treating ns associative array ( 处理为关联数组 ） 424 

■local Storage property (localStorage 属性 ） .Window 
object (Window 对象） 422 

1 ocal vari ab Ies ( 本地变最）丨 23 1 160 
life cycle of ( 生 命期 } 125 
shadowing global vsiriabk ( 遮蔽全局变量 ） 126 
Location ( 位 M) 

accuracy of ( 精度 ） 191 

Geolocation API in JavaScript (JavaScript 中地理定位 
API) 166 

how Geolocation API determines it (地理定位 API 如何确 
定） J68 

location aware ( 位置感知） 165 

loop attribute (loop 域性 ） t <video> element (<video> 元素） 
354 

loop property (loop 属性） T video object (video 对象 ) 385 
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looping ( 循环） 37 t 46-48 

deciding between while and for loops (while 和 for 循环中 
选择 ）47 

evaluating while and for loops (exampJe) ( 评价 while 和 for 
循坏（示例 U 48 
for loops {for 循环 > 47 

using arrays with loops ( 结合 循环使用数组 > 69 t 75 

while loops (whi 〖 e 循环 ） 46 

M 

Mac 

Apache server (Apache 服务器 ） ,configuring MIME 
types ( 配置 MIME 类型 ） 371 
setting up server cm ( 述立服务器 ） 231 
task monitor on OS X (OS X 上任务监视器 ） 520 

makeEmage function (example) (makeImage 邊数（示例 > } 
347 

makeServerReqijest function (example) (makeServerRequest 
数(示 例 ) >523 

Mandelbrot, Benail 495 

Mandelbrot Set , 参见 Fractal Explorer application (Fractal 
Explorer 应用 ） ,building ( 构 述） 
computing ( 计算 ） 496 
equation ( 公式 ）495 
explorer for ( 探险家 ）494 

ready-baked code for computing ( 计算的成品代码） 
504-507 

using multiple workers to compute (使用多个工作线程来 
计算） 497-500 

mapOptioim object (mapOptions 对象 ） 184 
mapping your position ( 映射位盈） 182 
maps ( 地图 > 

adding markers to ( 增加标记 } 1S6 T 204 
adding to a page ( 增加到页面 ） 183 
displaying on your page (184 
testing map display pn your page (页面 h_ 试地图显示） 
185 

<mark> element (<mark> 元素） 547 

markers ( 标记 ) T adding to map (增加到地 . 图 } J 86, 204 
controlling frequency of new markets (控制新拉记的频 
度 ）209 

optimising marker usage < 优化标记使用 ）206 
markup ( 标记 ), new ( 新增 )16,533 
Math‘floor function (Mathjoor 函数） 70, 304, 319 
Math library (Math 库） 73, 75 
MathPi 317 


Math,random function (Math.random 函数 } 70, 304, 319 
X ， y + and width of squares drawn on canvas ( _ 布 Ji 绘制的 
方块的 x ， y 和宽度 > 308 

maximum Age option (maxi mum Age 选项} ]99 T 201 

message handler ( 消息处理程序 ） + writing for worker < 为工 
作线程编写 ） 4S6 

messages ( 消息） 

data that can be sent ( 可以发送的数据） 484,491 
receiving by Web Worker (web 工作线程接收 ） 486 
receiving from Web Workers ( 从 WehT 作线程接收 ） 485 
sending and receiving using Web Sockets (使用 Web Sock- 
eu 发送和接收 ） 

sending from Web Worker ( 从 Web 工作线程发送 ）486 
sending to Web Workers ( 发送到 WebI 作线程 ） 484 

mes sag ing ( 消息传速 ）《 cros s-document (跨文打 > 543 

<meia> tags (<meta> 标记） 31 
omitting ( 忽略 ） 9 

specifying in HTML5 (HTML5 中指定） 4 
methods ( 方法） 142, 160 

code reuse and (代码重用） 146 
converting functions to ( 转换函数为 ） 143 
fu nctions versus ( 闲数 ） 151 

this keyword (this 关键宇 > T how it works (如何工作） 

149 

Microsoft , 参见 Internet Explorer; Windows systems 
Smooth Streaming ( 平淋流式机制 ）404 
Web Platform Installer (Web 平台安装程序 ） 231 

Mighty GumbalJ application (example) (Mighty Gumball 应用 
(示例 ）> 214-218 

browser cache ( 浏览器缓存 ）， warching out for ( 监视） 
212 

displaying sales (显 A 销售情况 ） 230 
improving the display ( 改 进显示 > 235 

making JSONP dynamic ( 使 JSONP 动态） 264-271 
mov \ng to live server ( 转移到实际服务器） 23 7-246 
options to circumvent cross-origin request problems ( 克服 
跨源请求问题的选项） 247^251 
removing duplicate saJes reports (_ 除重复的销售报告） 
273 

reviewing the specs (奄看规范 ） 228 

reworking code to use JSON (修改代码来使用 JSON) 

236 

testing locally ( 本地测试 ) 230, 234 
updating code to use JSONP ( 更新代码来使用 JSONP} 
256^263 

updating JSON URL with lastreporttimc (用 lastrepurttime 
£新以0\ URL) 275 
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writing onload handler function ( 编写 onload 处理由数 } 

229 

milliseconds since 1970 】 970 年以来的毫秒数 ） 44 2 

MIME types (MIME 类型） 

applicalioti/xhltnl+xml 536 

making sure server is serving video files with correct type 
( 确保服务器提供正确类型的视频文件 ）371 
of video files ( 视频文件） 359, 369 

mobile browsers ( 移动浏览器 ）20 
HTML5 support (mTML5 支持 ）18 

mobile devices ( 移动设备 ) 

browser support for offline Web apps (离线 Web 应用的浏 
览器支 53S 
canvas on ( 圃 布 ） 335 

testing geoiocaiioB code ( 测试地理定位代码） 179 
Modcmizr library (Modernizr^) .JavaScript 532 
movements { 移 动 ） 》tracking ( 眼综 } 1 92, 198 

form to start and stop tracking ( 开始和停止眼 . 踪的表单） 
193 

inoveTo method (moveTo 方法 ） ,canvas context 布上下 
文 > 31 】 

.mp3 audio (.mp3 音频 ） 533 

.mp4 video files < .mp4 视频文件 ）352 

MP4 container (MP4 容器 > 357 

MPEG-LA group (MPEG-LA 组 ） 357 

multi-core processors ( 多核处理器 ） 500 

muted property (muted 属性 ) ,video object (video 对象 ) 385 

N 

names ( 名） 

of functions ( 函数） V21 

guide to better naming of variables ( 吏好的变 fi 命名指 
南 ）42 

local ^nd global variabks with same name (同名的局部和 
全局变鱼 ）126 

localStorage keys (localStorage 键） 433,445 
of variables ( 变里的 ） 40 
name spaces ( 命名空间 ） T XHTML 536 
<nav> element (<tiav> 元素） 547 

navigator object (navigator 对象 ） ,geol oca lion 
property (geoloc ation 属性 ） 174 

new keyword (new 关键字 ） ,using with constructors (结合构 
造函数使用） 14S, 160 

next Video handler fu nctiort (ne Jtt Video 处 • 理蛾数 ） 367 
No Dumb Questions ( 没有傻问题） 


canvas ( 両布） 289, 293, 308 
e vents and handLers ( 事件和处理程序 ）95 
functions ( 函数） 121» 127 
functions and objects ( 喊数和对象 ）151 
gealocation ( 地理定位） 166, 197 
HTML5 9,20 

HTML5 web applications (HTML5 Web 应用） 2R4 
JavaScript 41 1 47„73 

JavaScript and HTML5 technologies (JavaScrLpt 和 HTML5 
技术 > 2 S 

local storage ( 本地 存储） 422 t 425 p 433, 442,445 

objects ( 对 象 ） 158 

talking to the Web ( 与 Web ■ 通信 ） 271 

video ( 视頰） 360, 37J 

Web Workers (We b 工作线程 ）491 

nth'Child selector (n‘lh-ehi 】 d 选择器 ） 548 
numbers ( 数字 J 

conversions to other types in expressions (表达式中转换为 
其 他类型 > 45 

primitive type in JavaScript (Ja vaScripl 中的基本类型 ) 

40 

storing in local storage ( 本地存储中存储 ）423 
numeric expressions (数值表达式 ） 43 

0 

<0bjcct> clement (cobject> 元素 ） ,using inside <video> 
element (<video > 元素中使用 } 362 

object literals ( 对象直接 ll> 15 】 
objects ( 对 象） 40 t 113, 131 — 161 

adding or deleting properties at any time (任何时间增加或 
_ 除属性 ） 135 

array ( 数组 } 73 

arrays of ( 数组 ）457 
in the browser (浏览器中） 154 

built-in versus created by users (内 M 与用户创建 ） 159 
constructors ( 构造函数 ） 147 

converting lo and from JSON string format ( *UJSON 丰符 
串格式之间的 转换 } 226, 227 
creating ( 创建 )132 

movie object (example) (movie 对象（示例 ）） 138 
using constructors ( 使构造函数） 148, 153 
Crossword Puzzle ( 填宇游戏 ） 】64 
methods (方法） 142 

No Dumb Questions (没有傻 问题） 15U 158 
passing to functions ( 传入闲数 ） 136 
properties (M 性 ） 132 

storing in k>calStorage ( 存储在 localSmragc 中） 445,454 


你现在的位置 ► 


567 


索弓 j 


storing shapes drawn in canvas ( 存储画布中绘制的 形状） 
as 336 

su mm ary of i mportarn points ( 要点总结 ） 160 
this keyword (this 关键字 ） 144 
uses of ( 使用 ） 133 

writing versus creating with a constructor {用 构造函数编 
写和创建 > 151 

offline web applications (南线 web 应用 ) 16, 538 

Ogg c ontainer format (Og g 容器格式 ） 357 

Ogg/Theora video encoding (Ogg/Theora 视频编吗） 356 T 357 

Ogg/Vorbis audio encoding (Ogg/Vorbis 音频编码） 356, 357, 
533 

,ogv video files (.ogv 视顿文件 > 357 

onclick properly (ondkk 属性 ） .button objects (button 对象） 
9J t 154 

adding event handler function to ( 增加亊件处理函数） 
91,450 

on error handler (onerror 处理程序 > t using in workers ( 工.作线 
稈中使用 ）522 

onload handler function <on 〖 oad 处理函数） 64, 229 
and anonymous functions ( 逍名闲数） i29 t 156 
using to load page before accessing the DOM ( 访问 DQM 
之前 用来加栽页而 ) 64 

writing with jQuery ( 用 jQuery 写 ） 534 

onload property (onload 厲性） 

image object (image 对象 ） 333 
window object (window 对象 ） 156 

assigning function io { 指定 函数） 64, 75. 129,156, 
265 

XMLHttpRcqu^st object (XMLHttpRequest 对象 ） 239 
browsers not supporting (浏 览器不支持） ， work 
around for < 避开 > 241 

onrrtessage event handler (onmessage 亊件处理程序 ） 485 
opacity property (opacity, 溪性 ） .548 

opacity ( 透明度） ,transitioning from opaque to translucent 
(从不 透明到半透明 ）MS 
open event (open 事件 ） ，Web Sockets 539 

Opera. 参见 browsers (浏览器） 

HTML5 support (HTML5 支持） IS 
not supporting XMLHttpRequest Level I ( 不支持 ¥\!- 
LHitpRequest Level 1) 241 

Ogg/Theora video (Ogg/Theora 视频） 357 
ogv video files (,ogv 视频文件 ） 352 
WebM/VPS video (WebMWPS 视频） 357 

<option> element (<option> 元素 ） t in stickies application (8J1 
时 ! 应用中 ） form 453 

options { 选项 ) ,GeoEocalion API (地 理定位 API) 198,201 


summary of ( 总结 ） 207 

Who Docs What exercise (连连雀练 >j) 200,211 

overlays (: i：#) , Google Maps 188 



pali ndro mes (回 文） 51 

pan To method (pan To 方法 ） ,map object (urnp 对象） 204 

parameters (行参） ,function (函数 ) 120 
names of (名） 121 

passing arguments to parameters (向行参传人实#) 116, 

122,162 

parent element (parent) 

adding ei child element with appendChild ( 用 appendChiJd 
坩加子 元素丨 100^102 
adding child eJements to (增加 子元素 > 108 

in DOM (DOM 中 ） 100 

parse Flo at fun ction {parse Ro at 由数) 423 
parseInt funclion (parselnt 函數） 423 

parse method (parse 方法) . See JSON.parse method ( JSON t 
parse 方法） 

passing by value (按愧传递 ） 136 

passing an object reference to a function (向函数传入对象 
引用） 136 

paths and arcs in canvas (画布中的路径和弧） 310-338 
arc method (arc 方法） 313-315 
drawing a smiley face (両笑脸 ） 344 
using arc method and path (使用 arc 方法和路径 ） 343 
using arc method and draw a circle (使用 arc 方法圓 - EU ) 

316 

using arc method and trace a path (使用 arc 方法跟综路 
径 > 316 

using paths to draw shapes ( 使用路径绘制 瑕状） 3U 
pause method (pause 方法） 

audio object (audio 对象)' 533 

video object (video 对象 ） 385 
PC, setting up server on ( 建立服 务器） 231 

Phrase-o-Malic appJkation (example) (Phrase'oMatic 应用 

(示例 ））70 

pinar-boxidg (左右加黑边） .video (视频 ） 354 

ping pong Web Workers game (example) (ping pongWcbXfl^fefe 
程游戏（示例 ））484 
add mg workers (增加工作 线程） 49 1, 492 
BE the Browser exercise (扮演浏览器 练习} 488.526 
piogPong message handler function for worker ( 工作线程 
pingPong 消息处 理函数 ）486 
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pixels ( 像素 ) 

accessing in video ( 视频中访问 ） 392 
in bitmap drawing (位 IS 绘制 ） 336 
drawing on canvas ( 國布上绘制） 281,306 
as presentation ( 作为表现 > t not content ( 不是内容） 

326 

processing in crnivas scratch buffer ( 画布 scratch 缓冲区中 
处理） 394,397 

processing video pixels and getting them into canvas for 
display ( 处理视频像素并增加到画布上来 1 . 示） 

396 

play button (example) (play 按钮 （承例 ）） 

handier for video booth ( 福 / 像间的处理程序 ）377 
popping back up when video ends ( 视频结束时弹起 ） 386 

playlist manager 〈播放 列表管理器 ), creating ( 创建 ) 86 
adding code lo save playlist ( 增加代码来保存播放列表） 
105 

app used to enter song (用 来输人歌曲的应 用）， click but¬ 
ton (点 ii 按钮 ）， and add song to playlist (向播放 

列表增加歌曲 ) L02 

code to save the playlist ( 保存播放列表的代码 ）104 
displaying pia.ylisL on HTML page (HTML 贸 lM 上显小播放 
列丧 > 97 

DOM after song titles are added io playlist (歌名增中到播 
放列表后的 DOM) 98 + 110 一 

getting song name from tex ： input element ( 从文本输入 7C 
素获取歌名 ）94 

handling Add Song button click events ( 处理 Add Song 点 
出率件） S 9 

HTML5 document to hold form and list element for 

playlist (HTML 文档包含表单和潘放列表..的列表兀 
素 > 87 

integrating storage code ( 集成存储代码 ）106 
playlists. ( 播放列表 ) 

creating video playlist ( 视频播放列表 ） 364 
implementing for Webville TV (example) (实现 Webvjllie 
TV ( 示例 ））366 

populating wilh song tiiles using JavaScript array (使用 
JavaScript 数组填充歌名 ） 65 、 8 2 
play method (play 方法） 

audio object (audio 对象） 533 
video object (video 对象 ) ■ 385 

plus sign (+) ( 加号 (+)) 

addition or string con eaten ation ope riitor (把加或字符屯迁 
接操作符 ） 45 

siring concatenation opemior 〈字 符串连接操 作符 ） 26 
prtg image format (png 图像格式 ） 347 
posiiioTi object {position 对象） 175, 207 


coords and timestamp properties (coords 和 timestampM 

性 ） l 如 % 

positionOptions T Geolocation API (地理定位 API) 190,198 

postAQuote function (example) (posnAQuote 函数（示例 ）） 

523 

poster aEribme (posterM 性） t <video> element (<video>fc 
素） 353,354 

poster property (poster 属性 ） t video object (video 对象 } 406 
posiMessage method (post Mess age 方法） 

Web Sockets 539 

worker object (worker 对象 ) 484,511,512 

<p> (paragraph) elcmcms (<p> (|S;^)7C^) , changing using 
JavaScript ( 使用 JavaScript 改变 ） 62 

preload attribute (preload 属性） ,<video> element t<video> 
元素 ) 354 

prese ntation ( 表现 ）， se parate from c ontent ( 与内容分离 ) t 
in canvas ( 画布 4 1 ) 326 

preview Handier function (example) (preWewHandler 函数（不 
例 ））302 

calling ftJIBackgroundColor function ( 调用 fiJlBiackgrovind- 
Color 函数 ） 307 

updating to call drawText function ( 处新 来调用 .drawText 

函数 } 330 

preview in t-shirt design app (T 恤设 t 十应用预览 ） T problems 
with ( 问题 ） 306 

primitive types (基本类型 } 40 

pnocessFnime function (example) (processFrame 闲数（示例 ）） 

396 

running again (再次运行 > 397 

processing video frame in canvas scratch buffer ( 画 . 布 scratch 缓 
冲区中处理视颊帧 ）397 

processWork function <eKample) (processWork 闲数（示例 ）） 
514,518 

program the we b .co m 271 
<progtc&s> element ( 〈 progress. 〉 ^ . 素） 547 

progressive video ( 渐进式视频 } 403 

properties (M 性 ) 132 

accessing ( 访问 ） t changing value ( 修改值 ） T and enu¬ 
merating ( 列举 ） 133 

adding or deleting al any time ( 任何时间增加或删除） 

135 

canvas context object (画布上下文对象 > 3 38 

fill Style property (fillStyleM 性） 308 
text properties (textM 性） 32S 
documenr object (document 对象） 154,157 
element object (dement 对象 > 158 

Geolocation API (地理定位 API) 190 
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local Storage, length property (lengthM+i) 424 
new { 新增 ) t in CSS3 (CSS3 中 ） 548 
objects as collections of ( 对象作为集合 ） 131 
specifyirig values in JavaScript (JavaScript 中指定值 } 

308 

video object (video 对象 ） 363 
window object (window 对象 ） 155 

pu^hUnpushBuUons helper function (pushUnpushBultons 辅助 
函数） 376,379,384 

putlmageData method (putlmageData//^, canvas context 
(画布上下文 > 397 

Q 

querySelectorAll method (querySdectorAH 方法 ） t documcnl 
object (documem 对象） 376, 542 

querySclector method (queryS&lector 方 fij) N documeiU 
object (documem 对象 ） 542 

Quicklime 371 

QUOTA_EXCEEDED_ERR exception (QUOTA_EXCEED^ 
ED_ERR 异常 ) 458.468 

quotation marks ( 引 号 } ， double ( 双引号 ）.iSee , under 
Symbols ( 符号） 

R 

radians ( 弧 度 ) 316 

converting degrees to ( 度转换为 ） 317 
radio buttons ( 单选钮） 380 t 382 

radius parameter of arc method (arc 方法的 radius 参数） 314 

reassignWorker function (example) (reassignWorker 通数（示 
例 ）） 514.518 

rectangles ( 矩厢 tKdrawing in canvas (iaj 布中绘制 ） 338 
drawing filkd rectangle ( 绘制填充矩瑕 ） 292 
references ( 弓 I 用） ， object ( 对象 ）136 

remaveltem method (removeltem 方法 ） , localStorage 
object (loca 〗 Storage 对象） 433„446 

removeStickyFmmDOM function {example) C removeStkky- 
FromDOM 兩数 （示例 ））452 

repetitive tasks ( 隶复任务） 46 
replaceChild method (rep I ace Chi kl 方法） 270 

request/re spouse model based on HTTP (基于 HTTP 的诸求 / 响 
应模型 ）539 

reserved words m Jeiv a Script (JavaScript 屮的保留宇） 4:1 

rcsizeToWinidow function (example) (resizeToWindow 闲数 
( 示例 ）> 5H 


responseText property (responseTextj^fK) T request 
object (request 对象） 222 

restore method (restore 方法 > ,canvas context ( 画布上 T 文） 
540 

results from workers' computations ( 从 T 作线程 t 十算得到的 
结果 ) 

from Fractal Explorer workers (example) ( Fractal Explorer 
工作线程（示例 ） > 513 

processing in Fractal Explorer (example) ( Fractal Explorer 
中处理（示例 ）> 514 

receiving results from workers ( 从 X 作线程接收结果） 
485,498 

stored in evenLdata property ( 存储在 event.dma 属性中） 

485 

return statements (returnig 句 ) 

in function body ( 函数体中） 117 

functions without ( 没有 … 的承数 ） 119 

RGB color values for pixels ( 像 : 素的 RGB 顔色值 ) ,processing 
video frame data ( 处理视频帧数据 > 397 ； 410 

rotate method (rotate 方法 ） ，c anvas c on text 〈画 布上下文） 

540 



Safari 2CL 参见 browsers ( 浏览器） 

developer for local stor^ge ( 本地存储的开发工具） 

434 

H.264 video format (H.254 视频 格式 } 352 
HTML5 support (HTML5 支持 ） IS 
MP4/H.264 video (MP4/JL264 视频） 357 
Quicktime player for mp4 video (mp4 视顿的 Quicktime 播 
放器 ）371 

save and restore methods ( 保存 和恢鉍 方法 ） ，canvas coa- 
text (_ 布上下文 ） 540 

Scalable Vector Graphics (SVG) (可缩放矢量阁形 （ SVG) > 
537 

sci-fi effect for video ( 视频的科幻效果） 374, 400, 410 

scope (作用域）， variables ( 变量 )124 

scratch buffer (scratch 缓冲区 ), video processing with (视频 
处理） 390,393 

implementing buffer wkh canvas ( 用画布实现缓冲区） 
395-398 

< scripl> elements (<script>7t； 素) 27 

adding to HTML file for call to Twitter JSONP API (增加 
到 HTML 文件來调用 TwitterJSONPAPI) 322 
lidding to HTML in <head> or <body> ( 增加到 HTML 的 
<head> ^<body>*) 53 


570 索弓 I 


索引 


creating and inserting dynamically ( 动态地创建和插人） 
263, 267-269 

retrieving data with ( 用来获取数据 ） 24 8-251 T 257 
script injection (脚 本注入 ） 271 
specifying in HTML5 (HTML5 中指定 ） 5 

scrollMapToPosition function (example) ( scto 11MapToPosition 
函数 （示例 ））204 
adding to application (增 加到应用 ） 205 
<section> element (<sectirm> 元素 ) 546 
security ( 安 全性 ） ,JSONPand 259 
security policy ( 安全策略 ） ,browsers ( 浏览器 ） 244 

selectedlndex properly (sdectedlndex. 禺性 ) h selection form 
controls ( 选择表承控件 ）302 
how ii works ( 如何工作） 303 
<sekct> element (cselecO 元素） 301 1 453 
Selectors API ( 选择器 API) 542 

selectors ( 选择器 ）， new (新增） Jn CSS3 (CSS3 中 > 548 

semicolon (;) ( 分号 （；> ) 、 ending JavaScript statements (结 
余 JavaScript 语句 } 39 

send method (send 方法） ,XMLHttpRequest 
object (XMLHupRequest 对象） 221 

servers { 服 务器 ） 230 

moving to live server ( 转移到实际服务器 ）237 
probkm when moving to live server (转移到实际服务器的 
问题 ） 242 

selling up your own Web server ( 建立你自己的 Web 服务 
器 ）231 

sessionStorage object (sessionStorage 对象） 460 

seiAuributc method (setAuribme 方法） T dement 
object (element 对象） 158 h 274 h 275 
setting sticky's id to its unique key ( 将印时贴的 id 设置为它 
的唯一键 > 450 

using to set the class attribute ( 用来设置 class 厲性） 236, 
257 t 379 t 430 

using to set the id attribute { 用来 设 £idM 检 ) 267, 269. 
450 

using to set the sre attribute ( 用來设置 sre 属性） 267, 269 

setEffect handler function (setEffect 处理涵数 ）， video booth 
(example) ( 裢像间（示例 ）） 378,391 

set Interval method (sednterval 方法） t window 
object (window 对象 > 263, 265 

using with Web Workers (结合 Web 工作线程使用） 523 

setllcm method (setltcm 方法） k localStorage 
object (local Storage 对象） 41S s 42 】 

setTimeout method (setTimeout 方法） ,window 
object (window 对象） 

timeout parameter ofO (timeout •签数 为 0) 398 


using to process video frame data ( 用来处理视頻柯数据） 
397 

using with Web Workers ( 结合 Web 工作线程 使用 ）523 

setupGraphics function (example) (setupGraptiics 函数（示 
例 ）） 509 

set Video handler function (setVideo 处理函数 ）. video booth 
(example) ( 摄 像间 ( 示例 ））378,387 
SGML 9 

shadowBlur properly UhadowBlur 厲性 )， canvas context ( 

布上下文 ） 335 

shadowCoJor property (shadowColor 属性） t canvas context 
(画布上下文 > 335 

shadowing variables ( 遮蔽变量 ） 126 

shadowOffsetX and shadowOffsetY properties (shadowOffsetX 
和 shadowOffset Y 属性）， c anvas context ( 画布 上 - 卜 _ 

文 ） 335 

showMap function (example) (showMap 函数（示 例 ） ）184 
creating map and displaying marker for initial Location (©] 
建地图汴显示初始位涅标记 ）205 
making sure it's called only once (确保只调用一次） 195 

single-threaded model ( 单线程模型 ） h JavaScript 474, 477 
breaking down ( 分解 } 475 

slashes (//) ( 斜线 ("））,beginning JavaScript commenis (开始 
J a va Sc ri 注释 ）39 

slow scdpl message ( 脚本运行缓慢消总 ）473 
<source> element (<source>X^!) 
sre attribute (sre 厲性） 359 
type (ittribute (type 厲性） 359 

using inside <video> element for each video format ( 为各 
视频格式在 <video> 元素中使用 ）358 
special effects ( 特效） 

applying to videos ( 应用到视频 ） 3S9-391 
functions ( 趣数 } 399 T 410 

speed property (speed, coordinates object (coordinates 

对象） 190, 197 

spike method Uplke 方法） ,Array object (Array 对象） 449 
SQL t Web 543 

square brackets ([]) (中括号 ([]) 

accessing object properties (访问对象厲性） 133 
and associative arrays ( 关联数组） 424 
creating arid indexing arrays { 创建 和索引数组 ） 67 
using with kyca I Storage (用于 loc.aIS_K)rage> 424 
squares (方块） t drawing on canvas (画布上绘制） 302 
creating with fillRect (用 fillRect 创建） 290, 292, 304 
filling background color of ciinv^s before drawing new 
squares (绘制新方快之前填充 _ 布背最色） 306 
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P se Ud £>c ode for drawS quare fu nction (draw Sq u are 函数的 
伪代码 ）303 

random y T and width of squares ( 方块的随机 x,y 和宽 
度 ） 30S 

writing drawSquare function ( 編写 drawSquare 函数） 304 
src attribute (src 厲性 ) 

<scnpt> element (<scripi> 元素 } 53,2lfi t 249 

updating with set Attribute (用 set Attribute 属性更新 ) 
267 

<source> dement (<source ： > 7 ii ； 素） 358, 359 
<video> elemem (<video> 元素） 353,354 
src property (srcM 性） 

audio object (audio 对象 > 533 

image object (i mage 对象 ) 333 
video object (video 对象 ） 370 

st：m Workers function (example) (start Workers 函数（乐例 ）） 
509,510 

statements ( 语句 ） 37 

ending with semicol ⑽（用分母结束 ) 39 

stkkies applicalion (example) ( 即时贴应用 （示例 > > 418, 

428 

adding u Add Sticky Note to Self™ button (增加 u Add 
Sticky Note to Self’ 按钮 ） 431 
adding JavaScript code ( 增加 JavaScript 代码） 430 
converting createSticky to use an array ( 转换 createSticky 
来使用 数组 ） 441 
creating interface (创建 界面） 429 
deleting sticky from DOM ( 从 DOM 删除即时贴） 452 
deleting sticky notes ( 删除便条贴 ）#46 
design flaw (设 讣缺陷 ） 436 

integrating array-based code ( 集成基 1 数组的代码 ）443 
rewriting to use an array ( 重写为使用数组 ） 440 
sdecting sticky note to delete (选 择要删 除的即时贴） 

450 

updating user interface to specify color (史新用户界面采 
指定颜色） 453-456 
streaming video ( 流式视颊 ） 403 
technologies for 〈技 术 ） 404 

string concatenation operator (+} ( 字符串连接操作符 (+>) 26, 

45 

string expressions ( 字符串表达式 ）43 

stringify method (string% 方法） . See JSON.stringify 
method (JSONiStFingify 方法 ) 
strings ( 字符串 ) 

accessing and enumerating object properties (访问和列举 
对象属性） 〗33 
in arrays ( 数组中 ）71 

as associative array indexes ( 作为关联数组索引 ）424 


conversions to numbers in expressions (表达式中转换为数 
字 ）45 

convening objects to JSON string format C 对象转换为 
JSON 字符串格式 ）226 

converting to floats with parseFloat function (用 parseFloat 
闲数转換为浮点数 ）423 

converting eo integers with parselnt funclion ( 用 pat^elnt 函 
数转换为整数 ）423 

creating string representation of an array (创途数组的字符 
串表示 ）441,467 

kcy/value pairs stored in locul storage (本地存储中存储的 
键 /ti 对 ） 4i8 

as objects ( 作为对象 ）159 

primitive type in JavaScript (JavaScript 中的基本类型） 

40 

receiving from Web Workers with onmessage in event .data 
properly ( 用6代111；‘血这厲性中00]11£55&起6接收〜01>工 
怍线程 ）485 

sending to Web Workers with postMcssage ( 用 pos(Message 
发送到 Web 工作线程 ）484 

stroke method (stroke 方法 ） ,canvas context ( 画布上 下文 ) 
312 

strokeText m ethod (st rokeTe M 方法 ） _ can va s con text (画布上 
下文 ） 32S 

structure ( 结构 ) 35, 545 
<style> element (<sty ■ 元素 ) 

adding border to canvas ( 向画布附加边框 ）288 

CSS style standard (CSS 足样次标准 > \ 31 

style property (style 厲性 ) 455 
sub workers 《子 T ■ 作线程 ） 523 

success handler ( 成功处理程序 ) ,Geolocation API (地理定 
位 API) 174, 175, 190 

SVG (Scalable Vector Graphics} (SVG ("T 捕放欠镊图形 ）） 

537 



table and table-cell layouts ( 表与表单元格布局 ）548 

target property (target 属性 ） .event object (evem 对象 ） 453 T 
4S5 

task monitor on OS X or Windows (OS X 或 Windows 1: 的任务 
监视器 ）520 

tasks (任务 ）， sending arid receiving data from Web Workers 

(Fractal Explorer example) (从 Web 工作线程发送和接 
收数据 (Fractal Explorer 示例 >> 5 J2 

terminate method (terminate 方法 ) ,worker object (worker 对 
象 } 522 
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textAlign property (textAlign 厲性 ） ,canvas context (画布上 
下文 ）328 

aligning tweet text in 1-shirt design app (example) (T 恤设 
计 应用中 对齐微博文本（示例 > ) 331 

textBasdine property (textBaseiine 域性 ）, canvas context (lif 
布 t 下文 ）329 

texl ( 文本 ） ,drawing on canvas (画 布上绘制 ) 325-332 
33B 

displaying HTMI, entities ( 显示 HTML 实体 ） 335 
drawTcxt function (drawText 闲数） 345 
splitting it into lines (划分为多行 > 335 

methods and properties in canvas API ( 面布 API 中的文 
本方法和属性 > 328 

text <input> element ( 文本 <1 叩 [|1> 元素 ）， value 
property (vfihie 属性 ） 94 

checking whether user entered input (检査用户是否已输 
人 ）96 

Thcora video formal (Theora 视颊格 ^ > 357 

third-party hosting services ( 第 = 方托管 服务） 230. 232 
this (keyword) (this ( 关 键字 ）> 144 

adding to movie object (example) (增 加到 movie 对象（示 
例 ））145 

questions and answers about ( 问 答 ） 151 
using with conslruciors ( 用千 构造函数 ） J 47 
using with method calls (用于 方法调 用） 149, 151 

threading ( 线程） ，参见 Web Workers (Weh 工作线程） 

adding another thread of control ( S 一个控制线程） 476 
single-threaded model ( 电线程模型） JavaScript 474 
wilh Web Workers (用 Web 工作线程） 478, 524 
time ( 时间 ) 

Dare object (Date 对象 ） t getTime meLhod ( gefHme 方 
法 ）442 

milliseconds since 1970 ( 自〖 970 年以来的奄秒数 ）442 
<cime> elemem 元素） 547 

rimeout option (timeout 选项） 199, 201 

timestatnp property (timestamp 域性 ） ,position 
object (posi tion 对 . 象 ） 190 

tiraeupdate event {timeupdsite 亊件 ） 398 

titk property UUIcil 性） ， dt>t；ument object (documem 对象） 
157 

loDataURL method (toDataURL/j - 法 ）. »canvas object (canvas 
对象 ）347 

toggk buUons ( 开关按钮） 380, ^82 

tracking movements (M 踪移动 > 192-198 

form to stEirt and stop tracking ( 开始和停止跟踪的表单） 

193 

transition property (transition 属性） 548 


translate and rotate methods ( 转换和旋转方法 ）,canvas con. 
text ( 画布上卜 ■ 文 ） 5>40 

triungle^ ( 三 角形 ） ，drawing on canvas ( 画 布上绘制 ） 3U 

true and false (boolean values) (true^JJfalse ( 布尔值）丨 39 

try/catch statements (Lry/catch 语句 ） capturing exceptions (捕 
获异常 ) 458,468 

t-shirt (T 恤） 2 82 ■参见 TweetShirt Web AppJicalion 

TY r eetShirt Web Applicaliun Cexample) (TweetShirt Web 应用 
( 示例 ））282 

iidding tweets to <selett> element in <Form> ( 中 
csdect>S 素增加微博 ）323 
adding user interface form to HTML page ( 向 HTML • 页; 面 
增加用户界商表单 > 3CM 
seating application design (创建应用设计） 297 
drKwing an image (绘制囹像 ）333 
drawing circles (國閲） 3IS 
drawing squares (画 方块） 304 
drawing text (绘制文本) 324. 327, 330, 33 】 
filling the background color < 填充背景色 > 306 

form for application interface (应用界面表承 ） 298 
getting tweets from Twitter (从 Twitter 获取微博 ） 322 
making image of design to upload and have printed on 
shirt (建立 设计图 像 h 传并打印在 Ti 上 ） .347 
requirements and user interface ( 需求和用户界向 ）283 
reviewing Emplemenlafion plan (检査实现 tftU) 296 
Twitter JSONPAPI, mating call to (调用 ） 322 
type attri bute (type 馬性) 

removal from <link> and <script> tags (从 <link><script> 

标记删除 ）5 

<sourcc> element (<source>7L^) 359 



uLappendChild method (ul.appencICMld 方法 > KH 
undefined values (定 义值 ）73 

returned by functions without return slalemenf (无 return 语 
句的函数返网）121 

underscore (_)( 卜’划线(」）, beginning variable names (开始 
变敢名）40, 42 

updaieSalcs function (example) (updaieSales 函数（示 :例 ）> 
230 

updateTweets callback function (example) (updateTweets 兩数 

(示例 ））323 

URL property (URL 塊性） ,document object (document 对 
157 

URLs 

callback parameter (回调 签数 ） 254 
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setting up JSONP URL (example)( 逮立 JSONP URL (示 
例 ）） 267 

updating JSON URL to include last report time (exitmple) 

( 更新〗 SONP URL 来包含最后一次报告时间 （示 
例} } 275 

Web Socket 539 

work iiround for browser caching (避开浏览器 缓存} 272 
UTF-B 9 S 31 

V 

value attribute (value ■ 厲性） ,text <input> element (文本 
<input>7£ 素 ）95 

value property (valued 性） ,text <input> element (文本 
<inpuO 元素） 94 

value attribute versus (value 域性与 > 95 

values (值） 

changing object property Vitlues (修改对象 MttM) 口 3 
functions as (函数作为） 128,129 
object property values ( 对象属性值 > 132 

variables (变致） 

assigning functions to ( 指定函数） 12R 
chaining value of ( 串链值 ) 39,133,141 
comparing to empty string ( 与空申比较 ） I OR 
declaring imd aligning value ( 声明和賦值） 26, 38 
local and global (局部和 全烏) 123, 160 
naming ( 命名） 40, 42 
objects assigned to ( 对象賦为 ） 136 
passing to functions (传递到 IS 数） 12 ] 
scope of (作用域） 124 
shadowing ( 遮 蔽） 126 
&hoU life of (短暂一生 ） 125 
var keyword (var 关键字 ） 39 
vector fonts ( 向迸字体 ） 329 
vector graphi cs vs. bi tmap (向 it ： 图 形与位 IS} 336 

video (视频） 16,349-412 

adding format information in the <source> 

element (<source> 元素中增加格式信息 ） 359 
booth (example)( 摄像间（示例 ））373 

adding special effects (增加特效） 389-391 
code to process the video (处理视频的代码 > 3州 
demo unit ( 演示单元） 374-376 
getting demo videos ready {获取 完成的诚示视频） 

383 

helper functions (辅助函数 ）379 
implementing video controls (实现视频 控件） 

384-386 

overview of video processing (视频处理槪览 ）392 


set Effect and set Video handlers 
理程序） 378 

switching test videos ( 切换测试视频 ）387 
video processing using scratch buffer ( 使用 scratch 缓冲 
区处埋视频 ）393 

writing special effects ( 编写特效） 399 〜 404 
browser support ( 浏览器 支持 〉 .determining level of (确 
定级别） 36】，41 1 

canPlayType method (canPlayType 方法 ） • how it works 
( 如何工作） 369-375 
codecs 357, 358 

controls' appearance m different browsers (不同浏览器中 
的控件外现 ）355 

C ro&s word Puzzle ( 填字游戏） 409, 41 1 
error event < error 事件 ) ,using ( 使 用 ） 406 
errors ( 错误 ）405 

falling back to supported player ( 后备的支持播放器） 

362 

formats ( 格式） 352 , 356, 358 

and possibility of standardization ( 标准的可能性） 

360 

hosted on the web ( 在 web 上托管 )' 403 

how <video> element works (<video>jt 桌如何工作 } 

353 

ideas for further devdopment ( 进一步开发的想法 ）407 
No Dumb Questions ( 没有傻问题） 360,371 
Sharpen Your Pencil exercise ( 动动笔练习） 

control buttons (控制按钮 ) ,toggle or radio (开关或 
申 - 选） 3R0, 382 

implementirtg playlist ( 实现播放列表） 364 s 365 
wcstern and sci-fi cffects ( 西部片和科幻片效果） 
400,410 

streaming ( 流式 ）403 

summary of important points ( 要点总结 ） 408 
testing for browser support when using code to load video 
( 使用代码加载视颊时 _ 试浏览器支持 ）368 
things to watch out for ( 当心的问题） 371 
using JavaScript with HTML5 ( 结合 HTML5 使用 
JavaScript) 23 

Webvilk TV (example) (WcbvLlle TV ( 示例 ））350 
building with HTML5 technology (用 HTML5 技术构 
速 ）350 

designing the playlist ( 设 l 十播放列灰 > 365 

handler for ended event to go to next video (ended 亊件 
的处理程序来播放下一个视频 ）367 
HTML5 page (HTML5 页面 } 35 ( 
implementing gctFormatExtension function with can- 
PI ay Type f 结合 can PlayTy pe 使用 getFormatExten- 
sion 实现 ）369 

implementing nextVideo function ( 实现 neslVideo 函 
数 ）367 
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iinplementing video playlist ( 实现视频播放列為） 

366 

integrating getFormatExtension function ( 集成 ge 〖 For- 
matExtension 函数 ） 370 

<video> element (<video>jcS) 
attributes ( 属性） 354, 408 
haw it works ( 如何工作 ） 353 
interview with ( 访谈） 38S 

methods ( 方法 } , properties ( 属性 ） T and events (书件 ) 
363 

new HTML5 eiemeniand API (新增 HTML5 元素和 API) 

351 

<object> eiemern wilhifi (其中的 <object> 元素） 362 
partnership with <canvas> dement (与 <canvas> 元桌的 f 火 
伴关系） 339,388 

<source> element within ( 其中的 <source> 元素） 358 
video object (video 对象） 

uccessing frame data ( 访问 _ 数据 ） 396 
canPlayType method (canPlayType 方法） 368-374 
error property (errorM 性 ） 406 
load method (load 方法） 3S5 
loop property (k>op 域性） 385 

methods ( 方法） t properties (属性 > t and events ( 事件 ) 
363 

muted property (muted 城性） 385 
pause method (pause 方法） 385 
play method ( 方法） 366, 385 

properties (M 性 ) ， methods ( 方法） ， and events (事件） 
408 

sre property ( 饥属性） 366, 387 
volume property (volume 属性） 360 
viewpon ( 视窗） 354 
volume property {vtilume 属性） 
audio object (audio 对象） 533 
video object (video 对象） 360 
Vorbis audio codec (Vorbis 音频编解昭器 ）357 
VPS video codec (VPS 视频编解码器 ） 357 

w 

W3C 20 
WampServcr 231 

watchld variable (exiimple) (watch[d 变里（示例 ））194 
Watch it! ( 当心〖 ） 

browsers not supporting XMLHttpRequest's onload prop- 

erty ( <、■士 持 X M LHttpiReq ues t uni oad 域性的浏览 
器 ）229 


deleting all items from local store (从本地存储副除所有数 
据项 ） 435 

ensuring lhat server is serving video files of correct MIME 

type ( 确 保服务器提供正确 MIME 类型的视频文件） 
371 f 

grabbing image from canvas ( 从画布获取阁像 ） T an d code 
am from file:// ( 从 file:// 运行的代码 ） 347 
Internet Explorer not supporting Web Workers prior to [EIO 

(IE10 以前版本的 In terne t E icpiore 不支持 Web 工作线 
程 > 482 

Jocal storage and browser issues with file:// (本地存储和 
file// 的浏览器问韁 ） 422 

pages served from file:// ( 从 file:" 提供页面 ）， security 

restrictions in Chrome (Chrome 中的安全限制） 371 
pushing browser over local storage limit (让浏览器超出本 
地存储隈制 > 459 

Quicktimc need lo play mp4 video in Safari (Safari 中需耍 
Qui ckt i me 播放 mp4 如频 ） 371 
rapid changes in video support by browsers (浏览器对视频 
的支持快速变化 ）411 

Ready Bake Code not working in some browsers ( -雙浏 
览器中不能工作的成品代码 ）104 _ 

security restrictions in Chrome preventing running of Web 
Workers from file (Chrome 不允 l 午从文件运行 Web [ 
作线程的安全限制 ） 4S2 

server required to test geolocation code on mobile devices 

(移动设 备上测 试地理定位代码所需的脱务器） 

179 

work around for browsers not supporting XMLHttpRe- 
quest s onload property ( 避开不支持 XMLHttpRe- 
quest onload 域性知浏览器） 24 】 

watchLocation function (example) < watchLotriition 函数（示 
例 ） > J 94 

watchPosition method (watchPqsition 方法 ）， geolocaiion 
object (geoiocation 对象 ) 190 , 192 , 194,207 

controlling updates of location (控 制位置 更新） 197 
too many calJs to display Location (太多 dis play Loc at io n 调 
用 ） 

wav audio format (wav 音频 格式 ） 533 

web applications (web 应 ' 用〉 

APIs to create ( 创建 ■ ，的 API) 15 

examples ( 示例 ） 22 

and HTML5 6 . 13 

and JavaScript 21,24 

offline ( 离线 ）538 

w hat is it ( 是什么 ） 28 

Web Kit-based browsers (基 TWcbKit 的浏览器 ）20 参 
见 brow sets ( 浏览器） 

HTML5 support (HTML5 支持 > 18 
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webm video file format (,webm 视频文件格式） 352, 357 

WebM/VP8 video container formal (WehM/VP8 视颊容器格 
A) 357 

Web pages vs. Web applications (Web 页面与 Web 应用 ） 28 

Web Platform Installer (Microsoft) (Web 平台安装工具 (Micro- 
soft)) 231 

web services (web 服务） 213 

how it works ( 如何工作 ）， Mighty Oumball (exampJeJ 
(Mighty Gumball (示例 ) ） 216 
JSONP security issues and (JSONP 安全问题 ） 259 
keeping an open connection with (保持打开连接) t using 
Web Sockets ( 使用 Web Sockets) 539 
lucky/unlucky service ( 幸运 / 不幸运服务） 224 
parameters supported ( 支持的参数 ） 271 T 274 
receiving JSON data from ( 从 中接收 JSON 数据 ） 233 
specifying callback function for ( 指定回调涵数 ） 254 
using JSONP with ( 使用 JSONP) 253 
using XMLHttpRequest with ( 使用 XMLHupRequest) 

220 

ways to access ( Up 问途行 :） T in public API ( 公典 API 中） 
271 

XMLHttpRcqucst t cross domain security issues with (跨域 
安全问题 ）244 

Web Sharing (Mac) (Web 共車 (Mac) ) 231 

Web Sockets 539 
Web SQL 543 

Web Storage API 108.418 ..参见 local storage ( 本地存储）； 
locals torage object (local Storage 对象） 

support for ( 支 持 ） 422 

Web Workers (Web 工作线程） 16, 473-530 

adding another thread of control ( 另 一个控制线程 ) 476 
adding workers to pingPong game (example) (InjpmgPong 
游戏增加工作线程（示例 ）） 491,492 
BE the Browser exercise ( 扮演 浏览器练习） 488, 526 
browsers 1 suppott of ( 浏览器 支持 ） 482 
building explorer for Mandelbrot Set ( 为 Mandelbrol 集构廷 
浏览器 ）494 

building Fractal Explorer application (example) (^T^Frac- 
tal Explorer 应用 （示 ★) ) 503 1 509 

creating ( 创建 ） 483 

creating and giving tasks lo ( 创逮和分 i!d 任务） 508 
Crossword Pu^le (填字游戏 > 525,528 

data types that can be seat to workers (可以 发送到工作线 
程的数据类型 > 484 

getting workers started in Fractal Explorer 

appHcation (Fractal Expl orerj^ 用中启动工作线程） 
510 

handling click event to zoom in on canvas in Fractal B?t- 


pjorer (exaitipk) (Fractal Explorer 中处理点击事件 - 
在画布上放大 < 示例 ）） 515 
hand ling enors in work ers ( 工作线程中处理错误 ）522 
how they work ( 如何工作 ）478 

how workers make your apps faster ( 工作线程如何使用应 
用 E 快 ） 5CK) 取 

implementing in Fractal Explorer application (Fractu] Ex- 
plorer 应用中实现 } 511 

importscripts global function (importscripts 仝局函数） 

493 

managing fractal generations in Fractal Viewer (Fractal 
Viewer 中传理分形代） 5J8 
No Dumb Questions ( 没有傻问题 ）491 
number of workers ( 工 作线程个数） 

effects on pe rfoimance ( 对性能的影响 ） 520 
limits on ( 限 制 ） 501 

processing workers' results in Fractal Explorer {Fractal 
Explorer 中处理工作线程的结果 ）514 
ready-baked tode tor workers' computation of Mandelbrot 
Sel ( T ： 作线程 ij* 算 Mandelbrot 集的成品代码） 
504-507 

receiving a message from the worker (从工作线程接收消 
B) 485 

results from workers 1 computations (工怍线程计算的结 
果 ) 513 

rewriting pseudo-code to use workers ( 重写伪代码来使用 
工作线程 ） 5 02 

sending a message to the worker ( 向工怍线程发送消息） 
484 

Sharpen Your Pencil exercise ( 动动笔练习） 

potential uses for workers (TI 作线程的濟在使用） 

481 

using compact workers ( 使用简洁的工作线程） 490, 
527 

subworkers ( 子工作线程 ） 523 
summary of important points ( 要点 总结 ）524 
tasks for Fractal Explorer workers (FractaJ Explorer 工作线 
程的任务 ）512 
terminaring ( 终止） 522 

using importScripts to make JSONP requests (使用 im- 
portScripts 建立 JSONP 谪求 ） 523 
using multiple workers to compute Mandelbrot Set (使用多 
个工作线程来 L 十算 Mandelbrot 集） 497-500 
why workers can ! access the DOM { 为什么工作线程不能 
访问 DOM) 480 

writing worker's message handler (编写工作线程的消息处 
理程序 ） 486 

western effect for video (视频的西部 片效果 ） 374, 400 , 410 

"Wherever you go, there you are" {Geolocation example) 

( “ 无处可逃 " （地理定位示例 ）> 192 
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whiJe loops (while 德环 ）46 

deciding between for loops and ( 选择 for 循坏还足 ■") 47 

evaluating (example) ( 执行（示例 ）） 4S 
example in JavaScript (JavaScript 中的示例 ） 26 
if/else statemenis in (if/else 语句 ） 50 

white space in JavaScript code (JavaScript 代码中的空白符） 

39 

width and height attributes (width 和 height 域性） 

<canvas> elemem (<canvas> 元素 ） 286 
setting using CSS ( 用 CSS 设 S) 289 
<video> eiemenl (<video> 元素） 353 , 354 
WiFi positioning (WiFi 定位 ） 169 
window object (wmdcw 对象 } 154 

ereaEing onload event handler for ( 创违 onioad 事件处理程 
序 } 64,75, 159 

document object property (document 对象属性 ） |55 
as global object i 作为佥局对象） J56, 158 
localstorage property (IocalStorage 耦性 ) 422 
location property (location 厲性 ） 347 
onioad property (onload 厲性） 64, 156 
properties and methods ( 厲性和方法 ） 155 
selldterval method (sellnterval 方法） 155, 265 
sctTimeout method (setTimeout 方法） ]55 T 397 
windows (窗 口〉 

adding info window for Google Maps marker (example) 

( 为 Google Mapsfeid 增加信 息窗口 { 示例 ））187 
fitting canvas to browser window in Fractal Viewer (ex- 
amp 〗 e) (Fractal Viewer 中 Lh 画布占满浏览器窗 (_J 
( 示例 ））517 

Wi ndows sys terns (Wi ndo ws 系统） 

instiling Web Server on ( 安装 Web 服务器 ）231 
making sure server is serving video with correct MIME 

type ( 确保服务器提供正确 MIME 类型的视颊 ）371 
task monitor ( 任 务监视器 ）520 

worker object (worker 对象）参见 Web Workers (WefcO ： 作线 
程） ^ 

close method (cU^e 方法） 522 
creating ( 创建 ）483 

creating and using multiple { 创建和使用 多个 } 491,492 

onerror property (onenw 属性 ） 522 

onmessage property (onmessage 属性 ） 485 

post Mess age method (postMessage 方法 } 484 

sub workers ( 子 Z 作线程） 523 

term i nate me thod (term i n ate 方法 ) 522 


X 篇姘黍衆 

XHTML 9,536 少 ^ 

problems with ( 问题 ) 11 

XML ▼ 任郵承 # 

JSON versus (JSON 与） 226, 271 

SVG graphics (SVG 图形） 537 

uses of XHTML for (使用 XHTML) 536 

XMLHttpRequest object (XMLHupRequest 对象） 220, 239 
accessing response lext ( 访问响应文本 ） 222 
cross-domain requests ( 跨域晞求 ）， security issues with 
( 安全问 题） 244, 277 
Crossword Puzzle ( 填字游戏） 278. 2S0 
Fireside Chat with JSONP (与 JSONP 的围炉夜话 ） 260 
interview with ( 访谈 ) 225,240 
Level 2 240 

onload handler function (onload 处理函数） 229 
requests made by workers ( 工作线程的请求 ） 491 
retrieving JSONP data with (用 来获取 JSONP 数据 ） 233 
server required for use of ( 使用 … 需要服务器） 230 
when to use ( 何时使用） 246, 277 
work around for browsers not supporting Level 2 (避开不 
支持 Level 2 的浏 览器 ）241 

z 

zooming in on canvas m Fractal Viewer (example) (Fractal 
Viewer 中在両布 _h 放大（示洌 ） > 515 
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所有内部版面设计都由 Eric Freeman 和 Elisabeth Robson 完成 a 
Kathy Sierra 和 Bert Bates 始创 了 Head First 系列的外观 p 

版面设计和制版都完全在 Apple Macintosh 上完成准确地讲是两台 Mac Pro 和两台 MacBook Air Q 

写作跑点包括 ； Bain bridge Island ， Washington; Portland, Oregon; Las Vegas, Nevada; Port of Ness, 
Scotland; Seaside ， Florida; Lexington, Kentucky; Tucson, Arizo 關以及 Anaheim ， California , 漫长 
的写书过程中，我们用 Honest Tea 和 GTs Kombucha 来提神，另外离不开 Sia、Stgur Ros, Tom 
Waits 、 OMD v Phillip Glass^ Muse 、 Eno, Krishna Das v Mike Oldfield, Audra Mae, Devo % Steve 
Roach, Beyman Brothers 和 Pogo ( 都出 0 turntable.fm> 的音乐，还有很多你可能不太关心的 20 世 
纪 80 年代的音乐 D 
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